Backbone：绑定事件发生多次答案

【问题标题】：Backbone: bind event happen multiple timesBackbone：绑定事件发生多次
【发布时间】：2014-01-08 06:20:52
【问题描述】：

我做了一个简单的待办事项应用：

var Todo = Backbone.Model.extend({

});

var Todos = Backbone.Collection.extend({
    model: Todo
});

var todos = new Todos();

var ItemView = Backbone.View.extend({
    tagName: "li",
    template: _.template($("#item-template").html()),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    initialize: function () {
        this.listenTo(todos, 'remove', this.remove);
    },
    events: {
        "click .delete": "clear"
    },
    clear: function () {
        todos.remove(this.model);
    }
});

var AppView = Backbone.View.extend({
    el: $("body"),
    initialize: function () {
        this.listenTo(todos, 'add', this.addOne);
    },  
    addOne: function(todo) {
        var view = new ItemView({
            model: todo
        });
        this.$("#list").append(view.render().el);
    },    
    events: {
        "click #create": "create"
    },
    create: function () {
        var model = new Todo({
            title: this.$("#input").val()
        });
        todos.add(model);
    }
})

var app = new AppView();

在线演示在这里：http://jsfiddle.net/JPL94/1/

我可以正确添加项目，但是当我想删除一些项目时，它们都被删除了；

我发现它与ItemView中的绑定事件有关，当我点击一个delete按钮时，它们都被触发了。

但是我该如何解决这个问题呢？

【问题讨论】：

标签： javascript backbone.js javascript-events

【解决方案1】：

您正在侦听从集合中删除事件，如果我没记错的话，每当模型被删除时，集合都会调度删除事件，因此当您从集合中删除模型时，所有视图都会看到该事件.

我将视图中的初始化更改为

initialize: function () {
    this.listenTo(this.model, 'remove', this.remove);
},

而且它似乎有效。

http://jsfiddle.net/JPL94/5/

【讨论】：