WoowahanJS

https://github.com/woowabros/woowahanjs
Admin
WoowahanJS is a framework for developing large-scale web applications, designed to facilitate...
Tokens:6,593
Snippets:47
Trust Score:6.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Configuring start script in package.json

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/hello-yarn/README.md

This JSON snippet shows how to add a `start` script to the `scripts` section of your `package.json` file. This allows you to run the `webpack-dev-server` using a simpler command, `yarn start`.

```JSON
"scripts": { "start": "webpack-dev-server" }
```

--------------------------------

### Starting development server via package.json script

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/hello-yarn/README.md

This command executes the `start` script defined in `package.json` using Yarn. It's a convenient way to launch the webpack development server, as configured in the project's scripts.

```Shell
yarn start
```

--------------------------------

### Installing Yarn globally using npm

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/hello-yarn/README.md

This command installs Yarn globally on your system using npm, making the `yarn` command available from any directory. It's a prerequisite for managing project dependencies with Yarn.

```Shell
npm install -g yarn
```

--------------------------------

### Installing WoowahanJS

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/hello-yarn/README.md

This command adds the WoowahanJS library as a production dependency to the project. WoowahanJS is the core framework for building the application.

```Shell
yarn add woowahan
```

--------------------------------

### Running Webpack Dev Server directly

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/hello-yarn/README.md

This command directly executes the `webpack-dev-server` script using Yarn. It starts a local development server that serves the application and provides features like live reloading.

```Shell
yarn run webpack-dev-server
```

--------------------------------

### Installing Webpack and Webpack Dev Server

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/hello-yarn/README.md

This command adds Webpack and a specific version of Webpack Dev Server (v2) as development dependencies to the current project. These tools are essential for bundling assets and providing a live-reloading development environment.

```Shell
yarn add --dev webpack webpack-dev-server@2
```

--------------------------------

### Opening application in web browser

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/hello-yarn/README.md

This command opens the specified URL (`http://localhost:8080/`) in the default web browser. This URL is typically where the webpack development server serves the application.

```Shell
open http://localhost:8080/
```

--------------------------------

### Creating a Reducer for API Calls in WoowahanJS

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/action-reducer.md

This snippet demonstrates creating a reducer using Woowahan.Reducer.create to handle the 'FETCH_USER_INFO' action. The reducer uses 'this.getData' to perform a GET XHR request and defines an 'onSuccess' handler to process the response and 'this.finish' to send the result back to the dispatcher.

```javascript
const FETCH_USER_INFO = 'fetch-user-info';

Woowahan.Reducer.create(FETCH_USER_INFO, function(data) {
  this.onSuccess = function(response) {
    this.finish(response);
  };

  this.getData('/api/users/'+data.userid);
});
```

--------------------------------

### Handling Application-Level Events - Woowahan.js - JavaScript

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md

This snippet shows how to subscribe to application-wide events in Woowahan.js using 'app.on()'. It demonstrates listening for 'start', 'finish', and 'error' events, which are useful for implementing global behaviors like displaying toast popups, managing application state, or handling errors at a higher level.

```JavaScript
var app = new Woowahan();

app.on('start', function() {
  // Do something
  console.log(app.numberOfAction());
  console.log(app.numberOfWorkAction());
});

app.on('finish', function() {
  // Do something
});

app.on('error', function(errs) {
  // Do something
});
```

--------------------------------

### Handling Mouse and Keyboard Events in Woowahan.js

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md

This example illustrates how to capture and process mouse movement and keyboard input events in a Woowahan.js view. It shows how to log mouse coordinates (event.screenX, event.screenY) and input field values (event.target.value) within their respective event handlers.

```javascript
events: {
  'mousemove .canvas': 'detectMounsePosition',
  'keypress .input-box': 'detectInputValue'
},

detectMounsePosition(event) {
  console.log('x: %s, y: %s', event.screenX, event.screenY);
},

detectInputValue(event) {
  console.log(event.target.value);
}
```

--------------------------------

### Dispatching Actions from a View in WoowahanJS

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/action-reducer.md

This example shows how to dispatch an action from within a WoowahanJS view using 'this.dispatch'. It dispatches an action created by Woowahan.Action.create and specifies 'this.onReceive' as an optional handler to receive the action's processing result.

```javascript
onReceive(data) {

}

onAction(data) {
  this.dispatch(Woowahan.Action.create('SearchOrders', data), this.onReceive);
}
```

--------------------------------

### HTML Structure for Parent-Child View Communication Example

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md

This HTML snippet defines a basic structural relationship between a parent view (.search-form within parentView) and a child view (form within childView). It serves as the markup context for demonstrating traditional and improved inter-view communication patterns in Woowahan.js.

```html
<!-- parentView 시작 -->
<div class="search-form">
  <!-- childView 시작 -->
  <form>
    <input type="text" name="input-search">
    <button type="button" class="btn btn-search">Search</button>
  </form>
  <!-- childView 끝 -->
</div>
<div>
  <table>
  </table>
</div>
<!-- parentView 끝 -->
```

--------------------------------

### Reloading CollectionView Data with Options

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/collection-view.md

This example illustrates the use of the `reload` method with an options object to control how collection data is updated. The `uid` option specifies a property for comparison, `reset` determines if existing rows are removed, and `reverse` controls the order of row addition.

```javascript
// phoneNumber 속성을 기준으로, 새로 전달된 collectionData에 없는 기존 row는 제거 되며 row는 아래에서 위로 추가됩니다
this.reload(collectionData, { uid: 'phoneNumber', reset: true, reverse: true });
```

--------------------------------

### Example of Rendered HTML with Conditional Class

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view-model.md

This HTML snippet shows the final output after the Woowahan.js view and Handlebars template are rendered. It demonstrates that the `holiday` class was successfully applied based on the logic in `viewWillMount` and the `today` value is displayed.

```html
<time class="holiday">2001-10-21</time>
```

--------------------------------

### Collecting Input Data with Events (Declarative Selector) - Woowahan.js - JavaScript

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md

This example shows how Woowahan.js simplifies data collection by allowing a selector to be specified directly within the event handler definition. This eliminates the need for manual DOM access within the 'onSearch' method, as the 'keyword' is automatically passed as an argument.

```JavaScript
var childView = Woowahan.View.create('Child', {
  events: {
    'click .btn.btn-search': 'onSearch(input[name=keyword])'
  },
  
  onSearch(keyword) {
    this.dispatch(Woowahan.Event.create('search', keyword));
  }
});

/* parentView 코드는 동일하여 생략 */
```

--------------------------------

### Defining Basic DOM Events in Woowahan.js View

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md

This snippet demonstrates how to define and bind basic DOM events (click, dbclick, keypress) to event handler methods within a Woowahan.js view using the 'events' property. It shows the general format "eventName DOM-Selector": "EventHandler" and provides examples of common UI interactions.

```javascript
Woowahan.View.create('ViewName', {

  events: {
    "eventName DOM-Selector":            "EventHandler", // 기본 형태 설명
    "click .btn.btn-save":               "onSave",
    "dbclick .nav.ico-logout":           "onLogout",
    "keypress .form-control.txt-search": "onAutoSearch"
  },
  
  onSave(event) { 
    // Do something
  },
  
  onLogout(event) { 
    // Do something
  },
  
  onAutoSearch(event) {
    // Do something
  }
  
});
```

--------------------------------

### Collecting Form Data on Submit Event - Woowahan.js - JavaScript

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md

This example demonstrates how Woowahan.js can automatically collect all data from a form element when its selector is used with the '@submit' event. The 'onJoin' handler receives a 'form' object containing all the collected input values, simplifying form submission handling.

```JavaScript
  events: {
    '@submit .join-form': 'onJoin()'
  }
  
  onJoin(form) {
    /*
     form.name
     form.password
     form.gender
     ...
    */
    // Do Something
  }
```

--------------------------------

### Bootstrap-based Responsive HTML Page Structure

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/middleware/index.html

This HTML snippet provides a complete, responsive page layout using Bootstrap. It includes a fixed-top navigation bar with a toggle button, a jumbotron for a primary call to action, and a three-column content area. It serves as a template for a simple marketing or informational website.

```HTML
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div><!--/.navbar-collapse --> </div> </nav> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container"> <h1>Hello, world!</h1> <p>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.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p> </div> </div> <div id="child" class="container"> </div> <!-- /container --> <div> <!-- Example row of columns --> <div class="row"> <div class="col-md-4"> <h2>Heading</h2> <p>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. </p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> </div> <div class="col-md-4"> <h2>Heading</h2> <p>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. </p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> </div> <div class="col-md-4"> <h2>Heading</h2> <p>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.</p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> </div> </div> <hr> <footer> <p>&copy; 2016 Company, Inc.</p> </footer> </div>
```

--------------------------------

### Creating a Basic WoowahanJS View Component

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view.md

This JavaScript snippet defines a basic WoowahanJS View component. It imports the framework and a Handlebars template, sets up the view's tag name and class, defines event handlers, initializes a model with default data, and includes lifecycle methods like `viewWillMount` and `viewDidMount`.

```javascript
import Woowahan from 'woowahan';
import Template from 'basic-view.hbs';

export default Woowahan.View.create('BasicView', {
  tagName: 'div',
  className: 'main light',
  template: Template,
  
  events: {
    'click #how-old-are-you': 'onHowOldAreYou'
  },
  
  initialize() {
    this.setModel({
      firstName: '길동',
      lastName: '홍',
      age: 573
    });
    
    this.super();
  },
  
  viewWillMount(renderData) {
    this.log(renderData);
    
    return renderData;
  },
  
  viewDidMount($el) {
  
  },
  
  viewWillUnmount() {
  
  },
  
  onHowOldAreYou() {
    alert(this.getModel('age'));
  }
});
```

--------------------------------

### Implementing a Timer View with Data Binding in Woowahan.js

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view-model.md

This Woowahan.js view demonstrates a timer application using one-way data binding. It initializes `time` and `buttonLabel` in the model, handles button clicks to start/stop the timer, and updates the `time` model property at regular intervals, which automatically reflects in the bound HTML elements. It also includes cleanup in `viewWillUnmount`.

```javascript
Woowahan.View.create('TimerView', {
  template: Template,

  events: {
    'click button': 'onTimerToggle'
  },

  initialize() {
    this.updateHandle = null;
    this.startTime = 0;
    
    this.setModel({ 
      time: this.startTime, 
      buttonLabel: 'START' 
    });

    this.super();
  },

  onTimerToggle() {
    if (this.updateHandle) this.stopTimer();
    else this.startTimer();
  },

  stopTimer() {
    clearInterval(this.updateHandle);

    this.updateHandle = null;
    this.setModel({ buttonLabel: 'START' });
  },

  startTimer() {
    this.setModel({ buttonLabel: 'STOP' });
    this.startTime = Date.now();

    this.updateHandle = setInterval(() => {
      this.setModel({ 
        time: (Date.now() - this.startTime) / 1000 
      });
    }, 1000/30);
  },
  
  viewWillUnmount() {
    this.updateHandle && clearInterval(this.updateHandle);
  }
});
```

--------------------------------

### Styling Child Elements with CSS

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/middleware/index.html

This CSS snippet defines styles for a `.child` class, setting its width and font size. It also includes commented-out rules for a `.main-view` class, indicating potential previous or alternative styling. This snippet demonstrates basic CSS property declarations.

```CSS
/*.main-view {*/ /*width: 500px;*/ /*height: 400px;*/ /*}*/ .child { width: 200px; font-size: 24px; }
```

--------------------------------

### Creating Actions with Woowahan.Action.create

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/action-reducer.md

This snippet demonstrates how to use the Woowahan.Action.create utility to easily generate action objects. It takes the action's 'type' (e.g., 'ActionName') and an optional 'data' payload, simplifying the process of dispatching actions.

```javascript
Woowahan.Action.create('ActionName', data);
```

--------------------------------

### Registering a Reducer with WoowahanJS Application

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/action-reducer.md

This snippet illustrates how to register a created reducer, such as 'FetchUserReducer', with the main WoowahanJS application instance using 'app.use()'. This registration is essential for the application to recognize and utilize the reducer when its corresponding action is dispatched.

```javascript
import Woowahan from 'woowahan';
import FetchUserReducer from './reducer/fetch-user';

let app = new Woowahan();

app.use(FetchUserReducer);

app.start();
```

--------------------------------

### Initializing View Model in Woowahan.js

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view-model.md

This snippet demonstrates how to initialize a view model within the `initialize` method of a Woowahan.js view. The `setModel` method is used to set the initial state, which will persist throughout the view's lifecycle.

```javascript
Woowahan.View.create('MyView', {
  initialize() {
    this.setModel({
      title: '사용자 목록'
    });
  }
});
```

--------------------------------

### Creating a Basic Woowahan CollectionView

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/collection-view.md

This snippet demonstrates how to create a fundamental Woowahan CollectionView. It defines the template, the item view for each row (`rowView`), and the container element (`rowContainer`). The `viewDidMount` lifecycle method is used to load initial collection data using the `reload` method.

```javascript
import Woowahan from 'woowahan';
import BasicItemView from './basic-item-view';
import Template from './basic-collection-view.hbs';

export default Woowahan.CollectionView.create('BasicCollectionView', {
  template: Template,
  rowView: BasicItemView,
  rowContainer: '#basicContainer',
  
  viewDidMount() {
    const collectionData = [
      { name: '홍길동', age: 573 },
      { name: '이순신', age: 534 },
      // ...
    ];
    
    this.reload(collectionData);
  }
});
```

--------------------------------

### Styling Core UI Elements with CSS

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/timer/index.html

This CSS snippet defines the foundational styles for the application's user interface. It sets global body margins and font, centers the main application container, styles buttons with hover effects, and specifies a large font size for time display elements. These styles are crucial for the visual presentation of the WoowahanJS application.

```CSS
body { margin: 2em; font-family: "Helvetica"; }
#app { width: 90%; margin: 0 auto; text-align: center; }
.btn { width: 5em; height: 2.8em; border: 1px solid gray; background-color: #fff; padding: 20px; font-size: 2.4em; font-weight: bold; }
.btn:hover { background-color: #00d4b4; color: #fff; }
.container { margin-top: 100px; }
time { font-size: 14.8em; }
```

--------------------------------

### Defining Basic View Template with Handlebars

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view.md

This Handlebars template defines the basic HTML structure for a WoowahanJS view. It uses Handlebars expressions to display `lastName` and `firstName` and includes a button with the ID `how-old-are-you` for user interaction.

```handlebars
<h1>{{lastName}} {{firstName}}</h1>
<p>
  <button id="how-old-are-you">나이가 몇 살 일까요?</button>
</p>
```

--------------------------------

### 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
<button data-role="bind" data-name="buttonLabel">{{buttonLabel}}</button>
<time data-role="bind" data-name="time">{{time}}</time>
```

--------------------------------

### 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
<time{{#if holiday}} class="holiday"{{/if}}>{{today}}</time>
```

--------------------------------

### Receiving Custom Child View Events with Selector in Woowahan.js

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/event.md

This snippet demonstrates how to receive custom events from a specific child view instance when multiple child views are present or when a selector is needed for clarity. By including the selector (e.g., .search-form) after the @event name, the event handler will only be triggered for events dispatched by the child view mounted to that specific container.

```javascript
events: {
  '@search .search-form': 'onSearch'
}
```

--------------------------------

### Retrieving Current CollectionView Data

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/collection-view.md

This snippet demonstrates how to use the `getCollection` method to retrieve the current collection data managed by the CollectionView. This method always returns the most up-to-date data in JSON format, even if individual `rowView` instances have modified their view models.

```javascript
// 현재 rowView들이 가진 뷰 모델 리스트를 가져옵니다.
console.log(this.getCollection());
```

--------------------------------

### Defining a Large Font Size in CSS

Source: https://github.com/woowabros/woowahanjs/blob/v1/examples/route/index.html

This CSS snippet defines a class named 'big' that sets the font size to 50 pixels. It can be applied to HTML elements to increase their text size significantly.

```CSS
.big { font-size: 50px; }
```

--------------------------------

### Incorrect viewWillMount: Direct Model Modification

Source: https://github.com/woowabros/woowahanjs/blob/v1/docs/view.md

This JavaScript snippet shows an incorrect way to modify data within `viewWillMount` by directly calling `this.setModel()`. While `this.setModel()` changes the view's internal model, these changes will not be reflected in the current rendering cycle because `viewWillMount` operates on a copy of the model (`renderData`).

```javascript
viewWillMount(renderData) {
  this.setModel({ name: `이름은 ${renderData.name}` });
  return renderData;
}
```
Tokens:
Raw