javascript - 主干.js : Remove an item from a collection

Question

我正在使用 backbone.js 来实现一个好友列表，也就是名册。我对 Roster 集合和个人 rosterEntry 的主干 View 如下:

    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。

奇怪的是，如果我从花名册 View 中省略 remove() 函数，花名册中的所有条目都会被删除。如果我添加这个方法时除了控制台日志什么都没有，它会调用 Roster 和 RosterEntry View 上的 remove 方法——虽然我不确定为什么，但它们是乱序的!

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

如果我从 RosterEntry 模型中删除 remove 函数，我会得到这个错误:

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

我做错了什么？当元素从集合中移除时，如何从 DOM 中移除该元素？

Answer 1

我认为每个事件绑定(bind)定义中的 context 都有问题。

试着改变这个:

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

为此:

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

我知道您已尝试使用 bindAll 解决此问题，但是 bindAll 将对所列方法的每次调用都包装在实际对象的上下文中，但这可以如果您正在调用其他对象上的相同方法，请不要做任何事情:)。

已更新

我读了更多.. 看起来 bindAll 和 bind 命令的第三个参数做的完全一样。所以也许你可以使用一个或另一个。

因为 不工作model.remove 中的bindAll 是因为您忘记将它添加到_。 bindAll(this, 'render') 行，查看您的代码。我的建议解决了这个问题，因为正如我所说，这两种方法的作用相同。

所有这一切所做的是确保调用列出的方法(render, remove, ... 在一种情况下或 this.remove 在另一种情况下)将把 this 解释为对实际对象的引用。这看起来很愚蠢，但是 this 在 JS 中非常易变。

如果您仍然对 this 这件事感到困惑，请不要担心，我已经处理它很长时间了，而且仍在处理 not completely cofindent .

也许 essais like this可以帮助我们。