Backbone.js：從集合中刪除項目

Question

我正在使用backbone.js來實現一個名為Roster的好友列表。 我對名冊收集和獨立的骨干視圖rosterEntry如下：

    Slx.Roster.Views.RosterEntry = Backbone.View.extend({
    tagName: "li",
    className : "rosterEntry clearfix",
    templateSelector: '#rosterEntryTemplate',

    initialize: function() {
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
        this.model.bind('remove', this.remove);
        this.template = _.template($("#rosterEntryTemplate").html());
    },

    remove: function () {
        debug.log("Called remove event on model");
        $(this.el).remove();
    },
    render: function() {
        var renderedContent = this.template(this.model.toJSON());
        this.id = this.model.Id;
        $(this.el).attr('id', "friendid-" + this.model.get("id")).html(renderedContent);
        return this;
    }
});

    Slx.Roster.Views.Roster = Backbone.View.extend({
        el: "div#roster-container",
        initialize: function () {
            _.bindAll(this, 'render', 'add', 'remove');
            this.template = _.template($("#rosterTemplate").html());
            this.collection.bind('reset', this.render);
            this.collection.bind('add', this.add);
            this.collection.bind('remove', this.remove);
        },
        add: function (rosterEntry) {
            var view = new Slx.Roster.Views.RosterEntry(
                {
                    model: rosterEntry
                });
            $(this.el).append(view.render().el);
        },
        remove: function (model) {  // if I ommit this then the whole collection is removed!!
            debug.log("called remomve on collection");
        },
        render: function () {
            var $rosterEntries, collection = this.collection;

            $(this.el).html(this.template({}));
            $rosterEntries = this.$('#friend-list');

            _.each(collection.models, function (model) {
                var rosterEntryView = new Slx.Roster.Views.RosterEntry({
                    model: model,
                    collection: collection
                });

                $(this.el).find("ul#friend-list").append(rosterEntryView.render().el);
            }, this);

            return this;
        }
    })

我正在使用Firebug控制台進行測試，並且可以通過執行以下命令來填充名單：

collection = new Slx.Roster.Collection
view = new Slx.Roster.Views.Roster({collection:collection})
collection.fetch()

通過在Firebug控制台中執行以下操作，添加到集合也可以正常工作：

collection.add(new Slx.Roster.Model({username:"mickeymouse"})

並將新的rosterEntry添加到名冊中。

我的問題是collection.remove(5)從內存中的集合中刪除，但沒有更新DOM。

奇怪的是，如果我從名單視圖中省略了remove()函數，則會刪除名單中的所有條目。 如果我添加此方法除了控制台日志之外沒有任何內容，則會調用Roster和RosterEntry視圖上的remove方法 - 雖然我不確定為什么但是它們不正常！

["Called remove event on model"]
["called remomve on collection"]

如果我從RosterEntry模型中刪除remove函數，我會收到此錯誤：

TypeError: this.$el is undefined
this.$el.remove();

我究竟做錯了什么？ 從集合中刪除元素時如何從DOM中刪除元素？

Answer 1

我認為每個事件綁定定義中的context都有問題。

試着改變這個：

this.model.bind('remove', this.remove);

為了這：

this.model.bind('remove', this.remove, this);

我知道你試圖用bindAll來解決這個bindAll ，但是bindAll用實際對象的上下文來包裝對列出的方法的每次調用，但如果你在其他對象上調用相同的方法 ，這就無法做任何事情:)。

更新

我閱讀更多..看起來像bindAll和bind命令的第三個參數完全相同。 所以也許你可以使用其中一個。

該因為不正常的bindAll在model.remove是因為你忘了把它添加到_.bindAll(this, 'render')行，看在你的代碼。 我的建議修正了它，因為我說兩種方法都是一樣的。

這一切都做的是確保該所列出的方法調用（ render, remove, ...在一個案件或this.remove的除外）都打算interpretate this為實際對象的引用。 這看起來愚蠢，但是this是在JS非常不穩定 。

如果你仍然this件事情感到困惑，請不要擔心，我已經處理了很長時間而且還沒有完全結合 。

也許這樣的essais可以幫助我們。

Answer 2

你試過以下嗎？

this.listenTo(this.model, "remove", this.remove);

這似乎對我有用，我喜歡它看起來更好一點的方式。

鏈接到Backbone doc

Answer 3

可能正在調用兩個視圖上的remove方法，因為您必須同時刪除模型和集合。

在RosterEntry中：

 this.model.bind('remove', this.remove);

在名冊中：

this.collection.bind('remove', this.remove);