View Model

모든 뷰는 필요한 경우 상태를 가질 수 있습니다. 뷰가 가진 상태를 뷰 모델이라 합니다. 뷰 모델은 뷰의 템플릿과 결합되어 뷰의 UI를 구성합니다.

뷰가 유지되는 동안 함께 유지되어야하는 상태가 있다면 initialize에서 초기화 하는 것을 권장합니다.

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

뷰 모델을 만들기 위해 setModel 메소드가 제공됩니다. 인자로 모델 객체를 받으며 형식에 제한은 없습니다.

상태 주입 및 변경

뷰를 랜더링하기전 viewWillMount에서 상태를 변경하거나 추가 할 수 있습니다.

myview.hbs

<time{{#if holiday}} class="holiday"{{/if}}>{{today}}</time>

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 */
  }
});

뷰가 랜더링된 이후 HTML 결과는 다음과 같습니다.

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

템플릿과 결합하기 전 예제에선 today가 휴일인지 아닌지를 검사하여 holiday 값을 추가합니다. 이때 추가된 holiday 값은 템플릿 내에서 참조되어 적용됩니다. 그러나 랜더링이 끝난 후 호출되는 viewDidMount에서 getModel 로 holiday 값을 모델에서 얻고자 하면 값이 없습니다. 이는 viewWillMount로 전달되는 renderData가 랜더링 직전 사용되는 일회용 값 이라는 것을 의미합니다.