Backbone.js销毁后自动渲染视图
我的模型有两个视图。一个创建ul视图,另一个添加li元素。视图可以工作,但在调用destroy函数后不会更新。我尝试了各种方法绑定到render函数,但在此之后没有调用它。model.destroy();我错过了什么Backbone.js销毁后自动渲染视图,backbone.js,backbone-events,Backbone.js,Backbone Events,我的模型有两个视图。一个创建ul视图,另一个添加li元素。视图可以工作,但在调用destroy函数后不会更新。我尝试了各种方法绑定到render函数,但在此之后没有调用它。model.destroy();我错过了什么 var NoteListView = Backbone.View.extend({ tagName:'ul', className: 'note-group', initialize:function () { _.bindAll(t
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');
}
}
})
我发现在这里输入代码有两个问题 首先 您没有在节点列表视图上收听
删除事件
秒
_.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()
它只接受成功和错误回调这不是这个.model.models
应该是这个.collection.models
这是不是“this.listenTo(…)不是this.listenTo.on(…)?另外,我应该提到我在集合上使用了一个过滤函数,这就是为什么我要使用{.each(this.model.models,function(note){…}。请参阅上面的其他代码。谢谢!抱歉,筛选器实际上不是问题所在,也没有使用。我的问题似乎出在路由器上。请参阅上面路由器的代码。@mozgras..很高兴能提供帮助:)