Удалить Элемент Из Коллекции Backbone

У меня есть следующий код. Все работает отлично, но я пытаюсь выяснить, как удалить элемент из коллекции (примечание: Я новичок в 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;

});
6
backbone.js collections

1 ответов

вы можете использовать backbone в remove метод удаления модели из коллекции:

удалить модель (или массив моделей) из коллекции. Запускает событие" remove", которое вы можете использовать silent для подавления. Если вы являетесь обратным вызовом, прослушивающим событие "remove", индекс, при котором модель удаляется из коллекции, доступен в качестве параметров.индекс.

Если вы хотите сделать это, вы должны иметь способ, чтобы захватить модель, которая будет удалена из события click. Существует два способа сделать это:

  1. добавьте идентификатор модели в элемент, который запускает событие (скажем, как data-id attribute), чтобы обработчик событий мог захватить этот идентификатор при его вызове и использовать его для получения модели (и в этом случае удалить ее из коллекции).
  2. создайте вложенное представление для каждой отображаемой модели, что устраняет необходимость в атрибуте id.

есть большой сообщение от Derick Bailey о плюсах и минусах каждого подхода, на который я бы рекомендовал взглянуть (я в основном перефразировал его здесь).

надеюсь, что это поможет.

11