6

次のコードがあります。すべてが完全に機能しますが、コレクションからアイテムを削除する方法を見つけようとしています (注: 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;

});
4

1 に答える 1

12

バックボーンのremoveメソッドを使用して、コレクションからモデルを削除できます。

コレクションからモデル (またはモデルの配列) を削除します。サイレントを使用して抑制できる「削除」イベントを発生させます。「削除」イベントをリッスンするコールバックの場合、モデルがコレクションから削除されるインデックスは、options.index として利用できます。

ただし、これを行うには、モデルを取得してクリック イベントから削除する方法が必要です。これを行うには、基本的に次の 2 つの方法があります。

  1. モデルの ID をイベントをトリガーする要素に (たとえばdata-id属性として) 追加して、イベント ハンドラーが呼び出されたときにその ID を取得し、それを使用してモデルを取得できるようにします (この場合はコレクションから削除します)。
  2. レンダリングされたモデルごとにサブビューを作成します。これにより、id 属性が不要になります。

各アプローチの長所と短所については、Derick Bailey による素晴らしい記事があり、参照することをお勧めします (基本的に、ここでは彼の言葉を言い換えました)。

それが役立つことを願っています。

于 2012-10-28T14:28:52.797 に答える