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

ここ見ながらやってみた。http://arturadib.com/hello-backbonejs/docs/2.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){
    
    // メインアプリケーションビュー
    var ListView = Backbone.View.extend({
        
        // body要素をelプロパティにアタッチする
        el : 'body',
        
        // ビュー内でのイベントを監視、実行
        events : {
            'click button#add' : 'addItem'
        },
        
        // インスタンス生成時に呼ばれる初期化メソッド
        initialize : function(){
            
            // 指定された関数内でのthisを束縛する
            _.bindAll(this, 'render', 'addItem');
            
            // 追加したアイテムの数を格納
            this.counter = 0;
            
            // render関数を起動（自動でrender関数が呼ばれるわけではないので）
            this.render();
            
        },
        // ビュー内でのレンダリングを担当するメソッド（ユーザーによって手動で呼び出す必要がある）
        render : function(){
            $(this.el).append('<button id="add">Add list item</button>');
            $(this.el).append('<ul></ul>');
        },
        // 上記のクリックイベントによって叩かれるカスタム関数
        addItem : function(){
            this.counter++;
            $('ul', this.el).append('<li>hello world' + this.counter + '</li>');
        }
        
    });
    
    // ListViewインスタンスを生成
    var listView = new ListView();

}(jQuery, window, this.document));