Backbone.js：我的事件不會觸發！ 如何解決這個小代碼？

Question

我正在嘗試學習Backbone.js 。 我已經堅持了整整一個小時。 我不明白為什么我的活動不會觸發。

JSFIDDLE： http : //jsfiddle.net/jancarlo000/ejn2J/

JSBIN： http ://jsbin.com/efefip/3/edit

參見ItemView ，從本節開始：

var ItemView = Backbone.View.extend({ ....

完整代碼：

var Item = Backbone.Model.extend({ defaults: { Task: 'Study!'} });
var List = Backbone.Collection.extend({});

var MainView = Backbone.View.extend({
    tagName: 'ul',
    className: '',
    initialize: function(){
        _.bindAll(this, 'render');
        window.list = new List();
        window.list.bind('add', this.render, this);
    },
    render: function(model, collection, options){
        var itemView = new ItemView({model:model});
        $(this.el).append(itemView.el);
        $('body').html(this.el);
        return this; 
    }
});

//-------------- PROBLEM HERE -------------------------------
var ItemView = Backbone.View.extend({
    tagName: 'li',
    events: {
        "click #deleteMe":"deleteMe" //<-- this doesn't fire!
    },
    initialize: function(){
        _.bindAll(this, 'render');
        this.render();
    },
    render: function(){
        $(this.el).append(this.model.get('Task') + 
                              '<button id="deleteMe">Delete Me</button>'); 
            //WHY WON'T THIS FIRE!!!
        return this;
    },
    deleteMe: function(e){
        console.log('called deleteMe');
        $(this.el).remove();
    }
});
//------------------------------------------------------------

$(function(){

var app = new MainView();
var first = new Item({Task:'Learn JavaScript'});
var second = new Item({Task:'Learn HTML5'});
var third = new Item({Task:'Learn Backbone.JS'});
var fourth = new Item({Task:'Learn .NET MVC'});
list.add([first, second, third, fourth]);

});

Answer 1

在主視圖render ，使用$('body').html(this.el); 用未綁定的元素替換視圖及其事件處理程序。

刪除此行，然后在initialize方法中將主視圖el附加到主體，即可得到預期的結果

var MainView = Backbone.View.extend({
    tagName: 'ul',
    className: '',
    initialize: function(){
        _.bindAll(this, 'render');
        window.list = new List();
        window.list.bind('add', this.render, this);
         $('body').append(this.el);
    },
    render: function(model, collection, options){
        var itemView = new ItemView({model:model});
        $(this.el).append(itemView.el);
        console.log($(this.el));

        return this;
    }
});

http://jsfiddle.net/ejn2J/6/

如果可以的話，我有幾點意見

• 不要在您的視圖中創建您的Collection，在您的init代碼中創建它並將其傳遞給您的視圖，該視圖不應負責創建您應用的模型/集合，您可能需要在其他地方引用該集合，
• 您的MainView渲染應該用於重新渲染整個列表，而不是一個孤單的模型：其目的是維護集合的UI顯示，您可能稍后需要添加/編輯/刪除模型並刷新其模型表示
• 不要將您的MainView綁定到視圖代碼中的主體，在內存中構建視圖，然后將其el附加到其父視圖，這樣在以后移動時會更快，更容易

http://jsfiddle.net/ejn2J/7/

Answer 2

也可以通過調用this.delegateEvents（）;來解決此問題。 建立視圖后。