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

},