Question

I’m trying to add the functionality to my app so I can update my database and then update the DOM. The database gets updated fine, but the DOM doesn’t. Here is part of my view:

 App.Views.Table = Backbone.View.extend({
    tagName: 'span',
    initialize: function(options) {
        this.model.on('change', this.render, this);
        this.model.on('update', this.remove, this);

        this.template = this.options.template;
        this.url = this.options.url;
    },
    events: {
        'click .verify': 'verify',
        'click .spam': 'spam',
        'click .duplicate': 'duplicate'
    },
    verify: function(e) {
        id = e.currentTarget.id;
        table = new App.Models.Table({ id: id });
        table.urlRoot = this.url;
        table.fetch();
        table.toJSON();
        table.set('verified', 1);
        table.save();

    },
    spam: function(e) {
        ...

    },
    duplicate: function(e) {
            ...
    },
    remove: function() {
        this.$el.remove();
        console.log('hello');
    },
    retrieveTemplate: function(model) {
        return _.template($('#' + this.template).html(), model);
    },
    render: function() {
        //console.log(this);
        this.$el.html(this.retrieveTemplate(this.model.toJSON()));
        return this;
    }
});

As I understand it, this.model.on('update', this.remove, this); should call my remove function when save completes. But the callback isn’t firing because I’m not getting the console.log and my DOM isn’t being updated. What am I doing wrong? I followed a tutorial, but everything works fine in the tutorial.

Answer 1

There is no update event. I think you mean sync

http://backbonejs.org/#Events-catalog

"sync" (model, resp, options) — when a model has been successfully synced with the server.

Also a helpful hit for debugging that I found was using the all event to see what events are getting triggered.

Edit:

After some debugging, the goal of the verify() function was to save the verified attribute to the model. To do that we needed to change verify() to

this.model.set('verified', 1);
this.model.save();

instead of creating a new App.Model.Table and setting it to the table variable. Doing table .save() was saving the new table model, instead of the old model, this.model. That’s why the event handlers attached to this.model were net getting triggered.