Backbone.jsでViewの初期化のちょっとしたサンプル

今日ちょっと話題になった事をまとめておく。

• Backbone.Viewのイベントのセットっていつ行われるんだっけ？→initializeしてから。だからinitializeで動的にDOMを作成しても、その作成したDOMにイベントをバインドできる。
• そのイベントのセットってどういう条件なんだっけ？→基本はDOM構造をセレクタで当てるだけなので、静的に作られていようが、動的に作ろうが大丈夫。
• Backbone.View.elのエレメント自身にイベントをセットするのはどうやるんだっけ？→セレクタを書かなければ自分自身になる。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

<script>
$(function(){
var MyView = Backbone.View.extend({
    el: '#great',
    events: {
      'click .action': 'alertHoge',
      'click': 'test'
    },
    initialize: function(){
        $('<div class="action">Test!</div>').appendTo(this.$el);
    },
    test: function(event){
        alert('test');
    },
    alertHoge: function(event) {
        alert('hoge');
    }
});

var myView = new MyView({
});
})
</script>
<style>
    #great{
        background-color: black;
        padding: 20px;
    }

    .action{
        background-color: white;
    }
</style>
<div id='great'>
</div>