Question

我正在尝试学习 Backbone.js 。我被困在这一整个小时。我不明白为什么我的活动不会开火......

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

参见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/

如果可以的话，还有一些意见

不要在您的视图中创建您的集合，在您的初始化代码中创建它并将其传递给您的视图，该视图不应该负责创建您的应用程序的模型/集合，您可能需要在某处引用该集合否则，
您的MainView渲染应该用于重新渲染整个列表，而不是单独的模型：它的目的是维护集合的UI显示，您可能需要在以后添加/编辑/删除模型并刷新其表示
不要在视图代码中将MainView绑定到正文，在内存中构建视图，然后将其el附加到其父级，以后更快，更容易移动

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

Answer 2

这个问题也可以通过调用this.delegateEvents（）来解决;建立视图后。

Backbone.js：我的活动不会开火！我该如何修复这个小代码？

2 个答案: