BakboneJS라도 Binding Dom과 모델.

JavaScript - Client Side - Advent Calendar 2013
http://qiita.com/advent-calendar/2013/javascript  
12/3(火)分の記事です。

아이고

Backbone.js비 사용 jQuery 만 사용
웹 응용 프로그램의 소스 코드
잘 쓰죠?
"그래, 더 열심히 공부할게~"
요즘 AnglarJS가 인기가 많아서 질투가 나요.
Data Binding이 너무 부러워요...
Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes.
http://angularjs.org/
그래서 백본.나는 js에서 데이터-binding 기능을 추가할 수 있는 프로그램 라이브러리를 찾았다.

derickbailey / backbone.modelbinding

https://github.com/derickbailey/backbone.modelbinding
Star★: 730

theironcook / Backbone.ModelBinder

https://github.com/theironcook/Backbone.ModelBinder
Star★: 1,145

mikeric / rivets

https://github.com/mikeric/rivets
Star★: 1,230

NYTimes / backbone.stickit

https://github.com/NYTimes/backbone.stickit
Star★: 815
...많네.
이번엔 백본이야.ModelBinder 사용
어떤 느낌이 편할까요? 사용하지 않는 상황과 비교해 보고 싶습니다.

예제 응용 프로그램 만들기

왼쪽 연락처 목록의 그림에서 비교하고 싶습니다.

일단 백본.ModelBinder를 사용하지 마십시오...

요약 생성:JavaScript

var AddressListView = Backbone.View.extend({
    // ... 省略 ....
    createRender: function(){
        this.addressList.each( this.createOneRender, this);
    },
    createOneRender: function( address){
        var addressItemView = new AddressItemView({
            address: address,
            addressList: this.addressList
        });
        addressItemView.createRender();
        this.$('.js-list').append(addressItemView.$el);

    }
});

차트~가 나오면 createOne Render로 상세히 생성됩니다.
설명서: JavaScript

var AddressItemView = Backbone.View.extend({
    tagName: 'li',
    initialize: function(options) {
        this.address = options.address;
        this.listenTo(this.address, 'change', this.updateRender);
    }
    createRender: function(){
        this.$el.append('<div class="js-item-name item-name"></div>');
        this.$el.append('<div class="js-item-kana item-kana"></div>');
        this. this.updateRender();
    },
    updateRender: function(){
        this.$('.js-item-name').text( this.address.get('name') + '様');
        this.$('.js-item-kana').text( this.address.get('kana'));
        return this.$el;
    }
});

비교점은this다.address의change 이벤트 감시하기
업데이트 렌더로 업데이트된 곳입니다.

Backbone.ModelBinder 사용!

설명서: JavaScript

var BinderAddressItemView = Backbone.View.extend({
    tagName: 'li',
    initialize: function(options) {
        this.address = options.address;
        this.addressList = options.addressList;

        // Backbone.ModelBinderを使うぞ！
        this.modelBinder = new Backbone.ModelBinder();

    },
    createRender: function(){
        this.$el.append('<div class="js-item-name item-name"></div>');
        this.$el.append('<div class="js-item-kana item-kana"></div>');

       // DOMとModelのbind設定
       // 左側 Modelの属性名
       // 右側 DOMを探すセレクタ名、データ表示時のフォーマット  
        var bindings = { 
            name: {selector: '.js-item-name', converter: this.nameConverter},
            kana: {selector: '.js-item-kana' }
        };

       // DOMとModelのbind開始！
        this.modelBinder.bind(
            this.address,
            this.el,
            bindings );

    },

    // 名称表示時のフォーマット
    nameConverter: function(direction, value){
        if ( direction ){ return (value + '様'); }
        return value;
    }
});

initialize에 있는 Backbone.ModelBinder 생성 추가

this.modelBinder = new Backbone.ModelBinder();

백본은 createRender에서 생성된 DOM에 있습니다.ModelBinder#bind를 사용하여 Model을 연결합니다.

this.modelBinder.bind(
    this.address,
    this.el,
    bindings );

서식 묘사도 가능한 모습이다.
direction이 Model->View일 때, 정말로 들어갑니다.

nameConverter: function(direction, value){
    if ( direction ){ return (value + '様'); }
    return value;
}

총결산

아, 저기, 차라리 소스가 길어졌다고??(^^;;
앞이 안 좋아요?이렇게 생각하다.
하지만 모델과View의 DataBinding이 있다면
나는 사람의 출처 기술 차이가 적어지는 것도 좋다고 생각한다!
Marionetto.js랑 같이 공부하고 싶은데.

샘플 출처