Backbone 删除模型时不删除视图
Backbone doesn't remove View when Model removed
EventView 上有一个删除方法。当我点击移除按钮时,事件(模型)应该被移除,事件视图也是如此。
使用以下代码,我可以通过单击删除按钮从 mongodb 中删除模型。但是在我刷新页面之前,模型视图不会自行删除。
我在这个演示中使用 express、EJS 和 mongodb。
app.js // 使用快速路线设置
events.init = function(req, res) { res.render('index') };
events.all = function(req, res) {
db.event.find({}, function(err, event) {
if (err) return;
res.json(event);
});
}
events.delete = function (req, res) {
var Id = db.ObjectId(req.params.id);
db.event.remove({
"_id": Id
});
}
app.get('/', events.init);
app.get('/events', events.all);
app.del('/events/:id', events.delete);
client.js // Backbone 模型、集合和视图设置
var Event = Backbone.Model.extend({
idAttribute: "_id"
});
var EventCollection = Backbone.Collection.extend({
model: Event,
url: "/events"
});
var EventView = Backbone.View.extend({
events: {
"click .remove": "remove"
},
initialize: function () {
this.listenTo(this.model, 'destroy', this.remove);
},
remove: function (e) {
this.model.destroy();
},
render: function () {
var html = new EJS({url: '/partials/event-field.ejs'}).render(this.model);
this.$el.html(html);
return this
}
});
var EventCollectionView = Backbone.View.extend({
render: function () {
this.collection.each(function(event){
var eventView = new EventView({ model: event });
this.$el.append(eventView.render().$el);
}, this);
return this
}
});
init.js // 在页面加载时调用
$(function () {
var collection = new EventCollection();
collection.fetch({
success: function(data){
var collectionView = new EventCollectionView({ collection: data})
$('.upcoming .list-group').append(collectionView.render().$el);
}
});
});
不知何故我找到了如何让它发挥作用。
我把remove方法重命名为destroy,把destroy方法改成这样。
events: {
"click .remove": "destroy"
},
initialize: function () {
this.listenTo(this.model, 'destroy', this.destroy);
},
destroy: function () {
this.remove();
this.unbind();
this.model.destroy();
},
EventView 上有一个删除方法。当我点击移除按钮时,事件(模型)应该被移除,事件视图也是如此。
使用以下代码,我可以通过单击删除按钮从 mongodb 中删除模型。但是在我刷新页面之前,模型视图不会自行删除。
我在这个演示中使用 express、EJS 和 mongodb。
app.js // 使用快速路线设置
events.init = function(req, res) { res.render('index') };
events.all = function(req, res) {
db.event.find({}, function(err, event) {
if (err) return;
res.json(event);
});
}
events.delete = function (req, res) {
var Id = db.ObjectId(req.params.id);
db.event.remove({
"_id": Id
});
}
app.get('/', events.init);
app.get('/events', events.all);
app.del('/events/:id', events.delete);
client.js // Backbone 模型、集合和视图设置
var Event = Backbone.Model.extend({
idAttribute: "_id"
});
var EventCollection = Backbone.Collection.extend({
model: Event,
url: "/events"
});
var EventView = Backbone.View.extend({
events: {
"click .remove": "remove"
},
initialize: function () {
this.listenTo(this.model, 'destroy', this.remove);
},
remove: function (e) {
this.model.destroy();
},
render: function () {
var html = new EJS({url: '/partials/event-field.ejs'}).render(this.model);
this.$el.html(html);
return this
}
});
var EventCollectionView = Backbone.View.extend({
render: function () {
this.collection.each(function(event){
var eventView = new EventView({ model: event });
this.$el.append(eventView.render().$el);
}, this);
return this
}
});
init.js // 在页面加载时调用
$(function () {
var collection = new EventCollection();
collection.fetch({
success: function(data){
var collectionView = new EventCollectionView({ collection: data})
$('.upcoming .list-group').append(collectionView.render().$el);
}
});
});
不知何故我找到了如何让它发挥作用。
我把remove方法重命名为destroy,把destroy方法改成这样。
events: {
"click .remove": "destroy"
},
initialize: function () {
this.listenTo(this.model, 'destroy', this.destroy);
},
destroy: function () {
this.remove();
this.unbind();
this.model.destroy();
},