動的に作られる要素にイベントをbindする

Backbone.js Advent Calendar 1日目!

参加者が増えないと2人で25日回すことになるので，どんどん参加してください:)
http://atnd.org/events/22017
参加方法は，atndで登録したあと，AdventCalendarタグとBackbone.jsタグを付けて投稿してもらえれば，advent calendar用ページに登録します．
http://qiita.com/adcal/backbone

Backbone.jsのイベント登録

Backboneではイベントを

var myView = Backbone.View.extend({
    events: {
        "click .hello-button": "hello"
    },
    hello: function() {
        alert("hello!");
    }
});

のように記述するが，eventsはview作成時にbindされるためこの書き方だと動的に作る要素に対して利用できない．

var myView = Backbone.View.extend({
    initialize: function() {
        $('.hello-button').click(hello);
    },
    hello: function() {
        alert("hello!");
    }
});

のように書くという方法もなくはないが，登録イベント数が増えて来るとひどいことになる…

こういう場合はdelegateEventsを利用する．

var myView = Backbone.View.extend({
    initialize: function() {
        var events = {
            "click .dynamic-hello-button": "hello"
        };
        this.delegateEvents(events);
    },
    hello: function() {
        alert("hello!");
    }
});

のようにinitializeの中でdelegateEventsを利用して登録するといい．