How do I trigger a view event from the success callback of model.save() in backbone?

Question

I need to notify the user of my webpage what a model.save() call returned from the server.

The situation is so that a click triggers getAnswer() in the view, which in turns triggers the models method getAnswerServer(), which invokes .save() on the model, which is passed a success callback that accesses the response.

But how do I notify the user (by using a view event, or anything else) what the response was?

Here's what I have in my view:

events: {"click button#active" : 'getAnswer'},

initialize: ...
render: ...

getAnswer: function() {

        this.model.getAnswerFromServer();
    },

The model:

getAnswerFromServer: function() {

   this.save({myAnswer1 : false}, {success: function(model, response) {

                answer = model.get('answer');

                if (answer === true) {
                    console.log("The answer is true! But how do I tell the user about it?");
                }
                else if (answer === false) {
                    console.log("The answer is false! But again, how do I tell this to my user?");
                }
            }});
}

Ideally I would like to be able to call an event handler here and trigger an event in a different view, but I can't figure out how to access it from the success callback? Even triggering a custom event for this view would be enough actually.

Thanks!

Answer 1

You can always use a sync event on the view which you would like to show

option 1

// The view that you would like to show

    initialize: function() {
          this.listenTo(this.model, 'sync', this.render);
    }

This will be called when the model that is being saved syncs with the server.

But if the view that you wuld like to show does not contain this model , then you can always define a custom event handler and trigger this is the callback..

option 2

var customEvents = _.extend({}, Backbone.Events);

this.save({
    myAnswer1: false
}, {
    success: function (model, response) {
        answer = model.get('answer');        
        customEvents.trigger('notifyAnswer', { isAnswer : answer });
    }
});

// In the view where you want to show

initialize: function() {
     this.listenTo(customEvents, 'notifyAnswer', this.notify);
},
notify: function(data) {
     if(data.isAnswer) {
          // Show something
     }
     else { 
         // show something else
     }
}

Answer 2

model.save returns a promise. You can capture it in your getAnswer method and trigger an event or handle your error:

getAnswer: function() {
    var self = this;
    var p = this.model.save();

    p.done(function(data, status) {
       answer = self.model.get('answer');

       if (answer === true) {
           self.doTrueThing();
       }
       else if (answer === false) {
           self.doFalseThing();
       }
    });
    p.fail(function() {
       // failed :(
    });
},

Answer 3

Is there a reason why you are not just doing:

getAnswer: function() {
    this.model.save({myAnswer1 : false}, {success: function() {
            ...
            }.bind(this)});
},

in the view itself, rather than using a function defined in the model?

Then, you could bind the success handler to the view (with .bind(this) , as above) and then refer to the view in the success handler as this . You could then call any function defined in the view to update the view, like this.updateMe() .