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

ここ見ながらやってみた。3からの変更点はレンダリングをListViewからItemViewに委託したところ。http://arturadib.com/hello-backbonejs/docs/4.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){
    
    // モデル（一般的にキー、バリューのペアからなる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',
        
        // インスタンス生成時に呼ばれる初期化メソッド 
        initialize : function(){
            
            // 指定された関数内でのthisを束縛する
            _.bindAll(this, 'render');
            
        },
        
        // ビュー内でのレンダリングを担当するメソッド（ユーザーによって手動で呼び出す必要がある）
        render : function(){
            
            $(this.el).html(''
                + '<span>'
                + this.model.get('part1')
                + ' '
                + this.model.get('part2')
                + '</span>'
            );
            
            // チェーンするためにthisを返しておく（例：.render().el）
            return this;
            
        }
    });
    
    // メインアプリケーションビュー
    var ListView = Backbone.View.extend({
        
        // body要素をelプロパティにアタッチする
        el : 'body',
        
        // ビュー内でのイベントを監視、実行
        events : {
            'click button#add' : 'addItem'
        },
        
        // インスタンス生成時に呼ばれる初期化メソッド
        initialize : function(){
            
            // 指定された関数内でのthisを束縛する
            _.bindAll(this, 'render', 'addItem', 'appendItem');
            
            // コレクションのインスタンスを生成
            this.collection = new List();
            
            // オブザーバーの定義（コレクションにaddイベントを登録）
            this.collection.bind('add', this.appendItem);
            
            // 追加したアイテムの数を格納
            this.counter = 0;
            
            // render関数を起動（自動でrender関数が呼ばれるわけではないので）
            this.render();
            
        },
        //...