Javascript 主干：向集合中添加新模型无效

我正在主干网中创建非常有名的待办事项列表应用程序，但有一个功能不起作用，

mycollection.add（）

方法

使用

todoItems.remove（todoItem.at（0））

删除项目时，一切正常。 我遇到的问题是添加新项目时：

var newItem=newtodoitem（{说明：“谷物杀手”，状态：“完成”}）

todoItems.add（newItem）
-->这不会将其添加到集合中，长度仍然相同

我可以添加一个新项目的唯一方法是先删除一个项目，然后它将添加该项目，但它只能使用一个项目

有线索吗

以下是主要代码：

app.js

var TodoItem = Backbone.Model.extend({
    defaults: {
        description: "Pick up milk", 
        status: "incomplete", 
        id: 1
    },
    toggleStatus: function(){
        if(this.get('status') === 'incomplete'){
          this.set({'status': 'complete'});
        } else {
          this.set({'status': 'incomplete'});
        }
        this.save();
    } 
});

var TodoItems = Backbone.Collection.extend({
    model: TodoItem,
    localStorage: new Backbone.LocalStorage("choose-some-identifier"),

    initialize: function () {
        this.on('remove', this.hideModel, this);
    },

    hideModel: function (model) {
        model.trigger('hide');
    }
});

var TodosView = Backbone.View.extend({
    initialize: function () {
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.addAll, this);
    },
    render: function() {
        this.addAll();
        // this.collection.forEach(this.addOne, this);
        return this;
    },

    addOne: function (todoItem) {
        var todoView = new TodoView({ model: todoItem });
        this.$el.append(todoView.render().$el);
    },

    addAll: function () {
        this.collection.forEach(this.addOne, this);     
    }

});

var TodoView = Backbone.View.extend({
    tagName: 'article',
    id: 'todo-view',
    className: 'todo',

    template: _.template('<h3 class="<%= status %>">' + 
        '<input type=checkbox ' + 
        '<% if (status === "complete") print("checked") %> />' + 
        '<%= description %></h3>'),

    events: {
        "change input": "toggleStatus"
    },

    toggleStatus: function () {
        this.model.toggleStatus();
    },

    remove: function(){
        this.$el.remove();
    },

    initialize: function(){
        this.render();
        this.model.on('change', this.render, this);
        this.model.on('destroy', this.remove, this);
        this.model.on('hide', this.remove, this);
    },

    render: function () {
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));
        return this;
    }
});

var todoItems = new TodoItems([
    {
        description: 'Jeffrey Way',
        status: "incomplete"
    },
    {
        description: 'John Doe',
        status: "incomplete"
    },
    {
        description: 'Sally Doe',
        status: "incomplete"
    }
]);

var todosView = new TodosView({ collection: todoItems});
$(document.body).append(todosView.render().el);

var TodoItem=Backbone.Model.extend({
默认值：{
描述：“拿起牛奶”，
状态：“不完整”，
身份证号码：1
},
toggleStatus:function（）{
if（this.get（'status'）='completed'）{
此.set（{'status'：'complete'}）；
}否则{
此.set（{'status'：'complete'}）；
}
这是save（）；
} 
});
var TodoItems=Backbone.Collection.extend({
型号：TodoItem，
localStorage:new Backbone.localStorage（“选择一些标识符”），
初始化：函数（）{
this.on（'remove'，this.hideModel，this）；
},
hideModel:函数（模型）{
model.trigger（'hide'）；
}
});
var TodosView=Backbone.View.extend({
初始化：函数（）{
this.collection.on（'add'，this.addOne，this）；
this.collection.on（'reset'，this.addAll，this））；
},
render:function（）{
这是addAll（）；
//this.collection.forEach（this.addOne，this）；
归还这个；
},
addOne:函数（todoItem）{
var todoView=新todoView（{model:todoItem}）；
这个.el.append（todoView.render（）.el）；
},
addAll:function（）{
this.collection.forEach（this.addOne，this）；
}
});
var TodoView=Backbone.View.extend({
标记名：“article”，
id:“待办事项视图”，
类名：“todo”，
模板：u.template（“”+
'' + 
''),
活动：{
“更改输入”：“切换状态”
},
切换状态：函数（）{
this.model.toggleStatus（）；
},
删除：函数（）{
这个。$el.remove（）；
},
初始化：函数（）{
这个。render（）；
this.model.on（'change'，this.render，this）；
this.model.on（'destroy'，this.remove，this）；
this.model.on（'hide'，this.remove，this）；
},
渲染：函数（）{
var attributes=this.model.toJSON（）；
this.el.html（this.template（attributes））；
归还这个；
}
});
var todoItems=新todoItems([
{
描述：'Jeffrey Way'，
状态：“不完整”
},
{
描述：'John Doe'，
状态：“不完整”
},
{
描述：'Sally Doe'，
状态：“不完整”
}
]);
var todosView=newtodosview（{collection:todoItems}）；
$（document.body）.append（todosView.render（）.el）；
问题在于：

defaults: {
    description: "Pick up milk", 
    status: "incomplete", 
    id: 1
}

您已将
id
设置为默认值。id应该是唯一的，您试图添加另一个模型而不指定新id，因此Backone会很有帮助地注意到您已经有了一个具有该id的模型，所以它不会添加它

解决方案：您不应该设置默认id，在本地创建模型时，正常过程是：
-创建没有id的模型
-在某个时候
。保存它
-保存后，服务器响应所有属性+id

当然，服务器上已经存在的获取模型应该已经有了id

PS您不需要对单个集合（或get）进行哈希：

PPS在您看来，最好使用
listenTo
：

this.listenTo(this.collection, 'add', ...);

这在某些情况下可以防止memleaks，并且可以更轻松地批量停止侦听事件。
非常感谢。这对我很有帮助，你也给了我建议。非常感谢。
this.listenTo(this.collection, 'add', ...);