Backbone.js 销毁后自动渲染 View

Question

我的模型有 2 个 View 。一个创建 ul View ，另一个添加 li 元素。 View 有效，但在调用 destroy 函数后它们不会更新。我已经尝试了多种方法来绑定(bind)到渲染函数，但是在 this.model.destroy(); 之后它没有被调用；我错过了什么？

var NoteListView = Backbone.View.extend({

    tagName:'ul', 
    className: 'note-group',

    initialize:function () {

        _.bindAll(this, "render");    // I've tried all these:
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.render, this);
        this.model.bind("reset", this.render, this);
        this.model.bind('change', _.bind(this.render, this));
        this.model.on('change',this.render,this);
    },
    render:function (eventName) {
        _.each(this.model.models, function (note) {
            $(this.el).append(new NoteListItemView({
                model:note
            }).render().el);
        }, this);
        return this;
    }

});

var NoteListItemView = Backbone.View.extend({

    tagName:"li", 
    className: 'note-item',

    template:_.template($('#tpl-note-item').html()),
    initizlize:function(){
        this.model.on('change',this.render,this);
    },
    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },
    events: {
        "click .note-btn-delete": "deleteNote"
    },
    deleteNote: function(e){
        this.model.destroy();
    }
});  

编辑:这是收藏:

var NoteCollection = Backbone.Collection.extend({
    model:Note,
    url:"api.php/notes",
    initialize: function (models){
        this.filtered = new Backbone.Collection(models);
    },
    filterByCid: function(id) {
        var filtered = _.filter(this.models, function (model) {
            if (id==0) return true;
            return model.get("contactid") == id;
        });
    }
});

在路由器中:

this.noteList = new NoteCollection();
            this.noteList.fetch({data:{contactid:id},
                success: function (collection){
                    if (collection.length>0){
                            $('#note-container').html(new NoteListView({model:collection}).render().el);
                        }
                        else {
                            $('#note-container').html('No notes');
                        }
                }
            })

Answer 1

我发现在此处输入您的代码时存在 2 个问题。

首先

您没有监听 NodeListItemView 上的 remove 事件

第二

 _.each(this.model.models,

应该是

 _.each(this.collection.models,

如果 models 出现在模型上， 那么它应该在模型的选项中

 _.each(this.model.options.models,

代码

var NoteListView = Backbone.View.extend({

    tagName: 'ul',
    className: 'note-group',
    initialize: function () {
         this.listenTo.on(this.collection, 'reset', this.render);
    },
    render: function (eventName) {
        _.each(this.collection.models, function (note) {
            $(this.el).append(new NoteListItemView({
                model: note
            }).render().el);
        }, this);
        return this;
    }

});

var NoteListItemView = Backbone.View.extend({
    tagName: "li",
    className: 'note-item',

    template: _.template($('#tpl-note-item').html()),
    initizlize: function () {
        _.bindAll(this, "deleteNote", "removeView");
        this.listenTo.on(this.model, 'change', this.render);
        this.listenTo.on(this.model, 'remove', this.removeView);
    },
    render: function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },
    events: {
        "click .note-btn-delete": "deleteNote"
    },
    deleteNote: function (e) {
        this.model.destroy();
    },
    removeView : function() {
        this.remove();
    }
});

编辑

改变这一行

new NoteListView({model:collection}).render().el

改为使用集合

new NoteListView({collection :collection}).render().el

而且我不相信您的fetch 方法接收任何数据

    this.noteList.fetch({data:{contactid:id})

    this.noteList.fetch()

它只接受成功和错误的回调