CODEWITHSUNDEEP
backbone.js
sehummel
sehummel

Reputation: 5568

Backbone: Update not calling callback function

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.

Upvotes: 0

Views: 500

Answers (2)

hajpoj
hajpoj

Reputation: 13379

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.

Upvotes: 2

asgeo1
asgeo1

Reputation: 9078

There are no "create" or "update" events in Backbone.js. That's why your remove() callback isn't firing.

See http://backbonejs.org/#Events-catalog for a catalog of the possible events in Backbone.

UPDATE:

After looking at your code more closely, the answer is clear. They are different models:

initialize: function(options) {
    this.model.on('change', this.render, this);
    this.model.on('sync', this.remove, this);

and

table = new App.Models.Table({ id: id });
...
table.save();

The events that occur on your table object are not going to trigger event handlers that are bound to a totally different model (this.model).

Why create another model (table) when you already had a model? (this.model) ?

* UPDATE *

I don't really understand what you're trying to do, but perhaps try this:

table = new App.Models.Table({ id: id });
table.on('sync', this.remove, this);

Upvotes: 0

Related Questions