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

ここ見ながらやってみた。http://arturadib.com/hello-backbonejs/docs/3.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 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();
            
        },
        // ビュー内でのレンダリングを担当するメソッド（ユーザーによって手動で呼び出す必要がある）
        render : function(){
            
            $(this.el).append('<button id="add">Add list item</button>');
            $(this.el).append('<ul></ul>');
            
            // コレクションに格納されているモデルを書きだす
            _(this.collection.models).each(function(item){
                this.appendItem(item);
            }, this);
            
        },
        // 上記のクリックイベントによって叩かれるカスタム関数
        addItem : function(){
            
            // カウンターをインクリメント
            this.counter++;
            
            // 新規モデルインスタンスを生成
            var item = new Item();
            
            // インスタンスのプロパティをセット（デフォルトを変更）
            item.set({
                part2 : item.get('part2') + this.counter
            });
            
           ...