3

I have the 2 views for my model. One creates the ul view, the other add the li elements. The views work but they do not update after the destroy function is called. I've tried various ways to bind to the render function, but it is not being called after this.model.destroy(); What am I missing? 

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();
    }
});

Edit: here's the Collection:

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;
        });
    }
});

In the router:

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');
                        }
                }
            })
4

1 回答 1

2

我在您的代码中看到输入代码的 2 个问题。

第一的

您没有在NodeListItemView上收听remove事件

第二

 _.each(this.model.models,

应该是

 _.each(this.collection.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()

它只接受成功和错误回调

于 2013-06-06T07:17:52.110 回答