Backbone.jsはじめてみました5

ここ見ながらやってみた。4からの変更点はレンダリングをListViewからItemViewに委託したところ。http://arturadib.com/hello-backbonejs/docs/5.html

by FiNGAHOLiC

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

JavaScript

(function($, window, document, undefined){
    
    // データを永続して保持する事が無いので
    // 常にsuccessを返すようにBackbone.syncを上書きしておく。
    Backbone.sync = function(method, model, success, error){
        success();
    };
    
    // モデル（一般的にキー、バリューのペアからなるJavaScriptオブジェクト）
    var Item = Backbone.Model.extend({
        
        // デフォルト
        defaults : {
            part1 : 'hello',
            part2 : 'world'
        }
        
    });
    
    // コレクション（一般的にモデルオブジェクトの配列）
    var List = Backbone.Collection.extend({
        model : Item
    });
    
    // ビュー（アイテムを個別にレンダリングする）
    var ItemView = Backbone.View.extend({
        
        // this.el内で新規に生成するタグ名
        tagName : 'li',
        
        // クリックハンドラを登録
        events : {
            'click span.swap' : 'swap',
            'click span.delete' : 'remove'
        },
        
        // インスタンス生成時に呼ばれる初期化メソッド 
        initialize : function(){
            
            // 指定された関数内でのthisを束縛する
            _.bindAll(this, 'render', 'unrender', 'swap', 'remove');
            
            // change、removeイベントが発行されたら再描画する
            this.model.bind('change', this.render);
            this.model.bind('remove', this.unrender);
            
        },
        
        // ビュー内でのレンダリングを担当するメソッド（ユーザーによって手動で呼び出す必要がある）
        render : function(){
            
            $(this.el).html(''
                + '<span>'
                + this.model.get('part1')
                + ' '
                + this.model.get('part2')
                + '</span>'
                + '&nbsp;&nbsp;'
                + '<span class="swap">[swap]</span>'
                + '<span class="delete">[delete]</span>'
            );
            
            // チェーンするためにthisを返しておく（例：.render().el）
            return this;
            
        },
        // ビューを削除
        unrender : function(){
            $(this.el).remove();
        },
        // アイテムの値を入れ替えて再セット
        swap : function(){
            var swapped = {
                part1 :...