Data Binding

모델로 설정된 상태 값은 HTML 태그에 연결시킬 수 있습니다. 다음 예제는 버튼을 누르면 타이머가 시작되고 다시 버튼을 누르면 타이머가 종료되는 간단한 예제입니다. 전체 코드는 examples/timer에서 확인하실 수 있습니다.

<button data-role="bind" data-name="buttonLabel">{{buttonLabel}}</button>
<time data-role="bind" data-name="time">{{time}}</time>

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

셈플 코드 실행 화면

데이타 바인딩은 HTML 태그에 data-role="bind" 속성으로 표현합니다. 바인딩된 태그와 연결될 모델 내 키 값은 data-name="model-attr-name" 으로 지정됩니다. data-type에 따라 연결된 모델 속성 값이 변경되면 해당 태그를 다시 랜더링합니다.

지원하는 data-type 은 text, select 등이 있고 지원 타입 현황에서 확인하실 수 있습니다. 데이타 바인딩은 One-way 바인딩 방식입니다. 즉, 모델의 값이 변경되면 UI에 적용될 뿐 UI에 값이 변경된다 해서 Model에 값을 반영하진 않습니다. 양방향 바인딩을 - Two-way - 지원하는 AngularJS와는 다른 단방향 바인딩 방식을 지원합니다.