当删除模型时,Backbone不会删除View

时间:2016-05-24 11:22:04

标签: backbone.js

在EventView上有一个删除方法。当我单击“删除”按钮时,应删除事件(模型)以及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 Model,Collection and View setup

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

});

1 个答案:

答案 0 :(得分:0)

不知怎的,我发现了如何让它发挥作用。

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

},