This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
``` -------------------------------- ### Collecting Input Data with Events (Manual DOM Access) - Woowahan.js - JavaScript Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md This snippet demonstrates an initial approach to collecting user input data in Woowahan.js. The 'onSearch' event handler manually retrieves the keyword from an input element using jQuery's '$el.find().val()' before dispatching a 'search' event with the collected data. ```JavaScript var childView = Woowahan.View.create('Child', { events: { 'click .btn.btn-search': 'onSearch' }, onSearch() { var keyword = this.$el.find('input[name=keyword]').val(); this.dispatch(Woowahan.Event.create('search', keyword)); } }); var parentView = Woowahan.View.create('Parent', { events: { '@search': 'onSearch' }, onSearch(keyword) { // Do something... } }); ``` -------------------------------- ### Dispatching Custom Events with Data in Woowahan.js Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md This code snippet illustrates how to dispatch a custom event from a Woowahan.js view, including passing additional data. The Woowahan.Event.create helper function is used to create the event, and an object { keyword: 'javascript' } is passed as the second argument to carry event-specific data. ```javascript this.dispatch(Woowahan.Event.create('search', { keyword: 'javascript' })); ``` -------------------------------- ### Collecting Multiple Input Data with Events - Woowahan.js - JavaScript Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md This snippet illustrates how to collect multiple data points from different selectors and pass them as arguments to a single event handler. By listing multiple selectors in the event definition, Woowahan.js automatically collects and provides the corresponding values to the 'onSearch' function. ```JavaScript events: { '@click .btn-search': 'onSearch(input[name=keyword], .search.option)' } onSearch(keyword, option) { // Do search } ``` -------------------------------- ### Updating WoowahanJS View Model with setModel Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view.md This JavaScript snippet demonstrates how to update a WoowahanJS view's model using the `setModel` method. It shows that `setModel` can be called multiple times, adding new keys or overwriting existing ones, while preserving other model properties. ```javascript this.setModel({ name: 'foo' }); // name=foo <- new key this.setModel({ gender: 'male' }); // name=foo, gender=male <- new key this.setModel({ name: 'bar', age: 30 }); // name=bar, gender=male, age=30 <- new & edit key ``` -------------------------------- ### Defining Action Structure in WoowahanJS Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/action-reducer.md This snippet illustrates the basic structure of an action object in WoowahanJS, consisting of a 'type' to identify the action and a 'data' object to carry payload information. This structure is fundamental for initiating tasks within the application. ```javascript { type: 'ActionName', data: { } } ``` -------------------------------- ### Decoupled Parent-Child View Communication with @Events in Woowahan.js Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md This snippet demonstrates the improved, decoupled communication pattern between parent and child views using Woowahan.js's @events. The child view dispatches a custom 'search' event using this.dispatch(Woowahan.Event.create('search')), and the parent view listens for this event using '@search': 'onSearch' in its events property, eliminating HTML dependency. ```javascript var childView = Woowahan.View.create('Child', { events: { 'click .btn.btn-search': 'onSearch' }, onSearch() { this.dispatch(Woowahan.Event.create('search')); } }); var parentView = Woowahan.View.create('Parent', { events: { '@search': 'onSearch' } viewDidMount() { this.updateView('.search-form', childView); }, onSearch() { // Do something... } }); ``` -------------------------------- ### Handlebars Template for Woowahan.js Data Binding Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view-model.md This Handlebars template illustrates Woowahan.js one-way data binding using `data-role="bind"` and `data-name` attributes. It binds a button's label to `buttonLabel` and a time element's content to `time`, allowing UI updates when the model changes. ```handlebars ``` -------------------------------- ### Retrieving Full WoowahanJS View Model Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view.md This JavaScript snippet illustrates how to retrieve the entire model object from a WoowahanJS view using `this.getModel()` without any arguments. The returned value is a pure JavaScript object representing the current state of the view's model. ```javascript var model = this.getModel(); /* model = { name: 'bar', gender: 'male', age: 30 } */ ``` -------------------------------- ### Traditional Parent-Child View Communication in Woowahan.js Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md This JavaScript snippet shows a traditional approach to parent-child view communication in Woowahan.js where the parent view directly handles a DOM event (click .btn.btn-search) originating from the child view's HTML. It demonstrates viewDidMount for view updates but highlights the tight HTML dependency between parent and child. ```javascript var childView = Woowahan.View.create('Child', { }); var parentView = Woowahan.View.create('Parent', { events: { 'click .btn.btn-search': 'onSearch' }, viewDidMount() { this.updateView('.search-form', childView); }, onSearch() { // Do something... } }); ``` -------------------------------- ### Manipulating DOM in viewDidMount with jQuery Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view.md This JavaScript snippet demonstrates how to interact with the view's DOM after rendering is complete using the `viewDidMount` lifecycle method. The `$el` argument is a jQuery object representing the view's root DOM element, allowing full use of jQuery functionalities. ```javascript viewDidMount($el) { $el.find('.switch').toggleClass('on'); } ``` -------------------------------- ### Modifying View State Before Rendering in Woowahan.js Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view-model.md This Woowahan.js view demonstrates how to modify or inject state into `renderData` using the `viewWillMount` lifecycle hook. It calculates if `today` is a holiday and adds a `holiday` property to `renderData`, which is then used by the template. It also highlights that `renderData` is temporary and not part of the persistent model after rendering. ```javascript import Template from './myview.hbs'; Woowahan.View.create('MyView', { template: Template, initialize() { this.setModel({ today: '2001-10-21' }); this.super(); }, viewWillMount(renderData) { let today = new Date(this.getModel('today')); let day = today.getDay(); if (day === 0 || day === 6) { renderData.holiday = true; } else { renderData.holiday = false; } return renderData; }, viewDidMount($el) { console.log(this.getModel('holiday')); /* undefined */ } }); ``` -------------------------------- ### Incorrect viewWillMount: Missing Return Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view.md This JavaScript snippet illustrates an incorrect usage of `viewWillMount` where the modified `renderData` is not returned. Without returning `renderData`, any changes made within the method will not be reflected in the view's rendering. ```javascript viewWillMount(renderData) { renderData.name = `이름은 ${renderData.name}`; } ``` -------------------------------- ### Correctly Modifying Render Data in viewWillMount Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view.md This JavaScript snippet demonstrates the correct way to modify `renderData` within the `viewWillMount` lifecycle method. It shows how to update a property of the `renderData` object and then return the modified object to ensure changes are applied during rendering. ```javascript viewWillMount(renderData) { renderData.name = `이름은 ${renderData.name}`; return renderData; } ``` -------------------------------- ### Correctly Modifying WoowahanJS View Model Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view.md This JavaScript snippet highlights the correct way to modify a WoowahanJS view's model using `this.setModel()`. It contrasts this with an incorrect approach where direct manipulation of a `getModel()` return value does not update the view's internal model. ```javascript var model = this.getModel(); model.name = 'foo'; // 뷰 모델 name 값은 변경되지 않습니다. this.setModel({ name: 'foo' }); // 뷰 모델 name 값이 'foo'로 변경됩니다. ``` -------------------------------- ### Receiving Custom Child View Events in Woowahan.js Parent View Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md This snippet shows the syntax for a parent view to receive custom events dispatched by its child views in Woowahan.js. By prefixing the event name with '@' (e.g., '@search'), the parent view's onSearch handler will be invoked when the child dispatches the 'search' event. ```javascript events: { '@search': 'onSearch' } ``` -------------------------------- ### Handlebars Template for Conditional Class and Data Display Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view-model.md This Handlebars template defines a `time` element that conditionally applies a `holiday` class based on the `holiday` model property and displays the `today` model property. It's designed to be used with a Woowahan.js view that injects data before rendering. ```handlebars