0

我有一个由用户视图(列表)处理的用户集合。单个元素,模型,作为 UserView 处理。

当我现在获取一个新的 UserCollection(其他 url)而不是集合对象本身更新(包含新的用户模型)时,但 html 列表仍然存在。

列表显示:

    var ContactsView = Backbone.View.extend({
        tagName: "ul",
        className: "contacts unstyled",
        events: {

        },
        initialize: function() {
            this.collection = new UserCollection();
            this.collection.bind('add', this.addContact, this);
            this.collection.bind('remove', this.removeContact, this); // not getting called
            this.collection.bind('reset', this.listContacts, this);
            this.collection.fetch();
        },
        render: function() {
            this.$el.html();

            return this;
        },
        listContacts: function(contacts) {
            contacts.each(function(contact) {
                this.$el.append(new ContactView({ model: contact }).render().el);
            }.bind(this));
        },
        addContact: function(contact) {
            this.$el.append(new ContactView({ model: contact }).render().el);
        },
        // this is not getting executed
        removeContact: function(contact) {
            console.log(["removeContact fired"]);
            contact.unset();
        }
    });

项目视图

    var ContactView = Backbone.View.extend({
        tagName: "li",
        className: "contact",
        template: _.template(ContactTemplate),
        events: {
            "mouseenter li.contact": "expandOptions"
            , "mouseleave li.contact": "collapseOptions"
            , "click": "removeContact"
        },
        initialize: function() {
            this.model.bind('change', this.render, this);
            this.model.bind('remove', this.remove, this);
            this.model.bind('destroy', this.remove, this);
            this.model.bind('unset', this.remove, this);
        },
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));

            return this;
        },
        expandOptions: function() {

        },
        collapseOptions: function() {

        },
        removeContact: function(e) {
            this.model.destroy();
        }
    });

那么当 Backbone.Collection 在内部删除项目(例如 fetch)时会触发哪个事件,我该如何收听呢?

4

1 回答 1

1

获取Collection并且模型数据从服务器返回时, Collection调用并触发事件。reset()reset

在您的reset绑定中,您必须清空()您的 DOM 元素也是如此。在你的情况下,在你的listContacts().

于 2012-07-26T09:21:28.207 回答