Collections 主干无法从集合中删除项

我写了以下内容，出于某种原因，当我尝试从集合中删除该项时，它会在

removietem

函数中返回未定义的项：

Todos = (function(){

//////////////////////////
// 
//  MODEL
// 
//////////////////////////

var TodoModel = Backbone.Model.extend({

    defaults: {
        id: null,
        item: null
    }

});

//////////////////////////
// 
//  COLLECTION
// 
//////////////////////////

var TodoCollection = Backbone.Collection.extend({

    model: TodoModel

});

//////////////////////////
// 
//  VIEW
// 
//////////////////////////

var TodoView = Backbone.View.extend({

    el: $('#todos'),

    itemField: $('#new-item'),

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

    events: {
        'submit form': 'addItem',
        'click .remove-item': 'removeItem',
        // Debug
        'click #print-collection': 'printCollection'
    },

    template: $('#item-template').html(),

    render: function(item) {
        var templ = _.template(this.template);
        var id = _.uniqueId('todo_');
        this.el.children('ul').append(templ({id: id,item: item}));
    },

    addItem: function(e) {
        e.preventDefault();
        item = this.itemField.val();
        // Call render
        this.render(item);
        // Clear field
        this.itemField
            .val('')
            .focus();
        // Add to collection
        var newItem = new TodoModel({
            item: item
        });
        this.collection.add(newItem);
    },

    removeItem: function(e) {
        var thisid = this.$(e.currentTarget).parent('li').data("id");
        var thisitem = this.collection.get(thisid);
        thisitem.remove();
        // Remove from DOM
        $(e.target).parent('li')
            .fadeOut(300,function() {
                $(this).remove();
            });
    },

    printCollection: function(){
        this.collection.each(function(item) {
            console.log(item.get('item'));
        });
    }

});

//////////////////////////
// 
//  SELF
// 
//////////////////////////

self = {};
self.start = function(){
    new TodoView({collection: new TodoCollection()});
};
return self;

});

---

模型没有

remove

方法（除非您自己添加了一个），因此这不起作用：

var thisitem = this.collection.get(thisid);
thisitem.remove(); // <------ this goes boom!

这将告诉服务器模型已消失，并且它触发的

“destroy”

事件将通知集合模型已消失。如果不想与服务器交谈，则可以将集合告知模型：

this.collection.remove(thisitem);

这将在不影响服务器的情况下将其从集合中删除

切换到

this.collection.remove

工作：

---

当我在这里时，你有一个隐藏的问题：

self = {};

当您可能想要分配给名为

self

的局部变量时，您正在分配给全局

self

（实际上是a）。这就足够了：

return {
    start: function() {
        new TodoView({collection: new TodoCollection()});
    }
};

如果您愿意，也可以这样做：

var self = {};
self.start = function(){
    new TodoView({collection: new TodoCollection()});
};
return self;

---

我更喜欢使用

\u this

或

that

而不是

self

，因为

窗口中有一些有趣的错误。如果您忘记
var self中的
var
，self
可能会导致错误或者如果您不小心忘记声明
self
。是的，我通过艰苦的方式学会了这一点。
模型没有
删除
方法（除非您自己添加了一个），因此这不起作用：

var thisitem = this.collection.get(thisid);
thisitem.remove(); // <------ this goes boom!

这将告诉服务器模型已消失，并且它触发的
“destroy”
事件将通知集合模型已消失。如果不想与服务器交谈，则可以将集合告知模型：

this.collection.remove(thisitem);

这将在不影响服务器的情况下将其从集合中删除

切换到
this.collection.remove
工作：


当我在这里时，你有一个隐藏的问题：

self = {};

当您可能想要分配给名为
self
的局部变量时，您正在分配给全局
self
（实际上是a）。这就足够了：

return {
    start: function() {
        new TodoView({collection: new TodoCollection()});
    }
};

如果您愿意，也可以这样做：

var self = {};
self.start = function(){
    new TodoView({collection: new TodoCollection()});
};
return self;

我更喜欢使用
\u this
或
that
而不是
self
，因为
窗口中有一些有趣的错误。如果您忘记
var self中的
var
，self
可能会导致错误或者如果您不小心忘记声明
self
。是的，我通过艰苦的方式学会了这一点。
你的模板是什么样子的？您确定
此ID
是您所期望的吗？通常你
model.destroy（）
不是
model.remove（）
so
thisitem.remove（）有点可疑。jsfiddle.net或jsbin.com上的函数示例会很有帮助。@muistooshort-这是我的提琴：。看起来我根本没法抓住这个模型。我尝试了一个点击事件来提醒内容，但即使这样也不行。你的模板是什么样子的？您确定
此ID
是您所期望的吗？通常你
model.destroy（）
不是
model.remove（）
so
thisitem.remove（）有点可疑。jsfiddle.net或jsbin.com上的函数示例会很有帮助。@muistooshort-这是我的提琴：。看起来我根本没法抓住这个模型。我尝试了一个点击事件来提醒内容，但即使这样也不起作用。非常感谢您的解释（以及您关于
self
的注释）。我知道得更清楚，而且感觉“不对”，很高兴澄清了这一点！非常感谢您的解释（以及您关于
self
的注释）。我知道得更清楚，而且感觉“不对”，很高兴澄清了这一点！