collections - 从 Backbone 收集中删除项目

Question

我有以下代码。一切工作正常，但我试图弄清楚如何从集合中删除一个项目(注意:我是Backbone的新手)。我检查了其他几篇文章，但似乎可以弄清楚:

Todos = (function(){

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

var TodoModel = Backbone.Model.extend({

    defaults: {
        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(i) {
        var templ = _.template(this.template);
        this.el.children('ul').append(templ({item: i}));
    },

    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) {
        $(e.target).parent('li')
            .fadeOut(300,function() {
                $(this).remove();
            });
        // NEED TO REMOVE FROM COLLECTION...

    },

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

});

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

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

});

Answer 1

您可以使用 Backbone 的 remove 方法从集合中删除模型:

Remove a model (or an array of models) from the collection. Fires a "remove" event, which you can use silent to suppress. If you're a callback listening to the "remove" event, the index at which the model is being removed from the collection is available as options.index.

但是，如果要执行此操作，则必须有一种方法来获取要从click事件中删除的模型。基本上有两种方法可以做到这一点:

将模型的ID添加到触发事件的元素中(例如data-id属性)，以便事件处理程序可以在调用该ID时获取该ID并将其用于获取模型(在这种情况下，将其从集合中删除) )。

为每个渲染的模型创建一个 subview ，这消除了对id属性的需求。

我建议您看一下每种方法的优缺点 great post by Derick Bailey(我在这里基本上是对他的解释)。

希望能有所帮助。