Question

I’m calling ‘save’ on my model and returning the new model as json in my PHP backend. When I step through the Backbone.Model.save method, I can see that it successfully gets the server response and then sets the model (in the options.success closure below). But when the execution is returned to my click handler, the model has the old properties (ie. the id is not set). What could be happening?

Here is my click handler:

addButtonClick: function(e) {
  var data = $(e.target).closest('form').serializeObject();
  var p = new Domain.Page; // this extends Backbone.Model
  p.set(data);
  p.save();
  // ****
  // **** AFTER p.save, the model p still has the OLD ATTRIBUTES... why??
  // ****
  return false;
}

Here is Backbone’s save method:

// Set a hash of model attributes, and sync the model to the server.
// If the server returns an attributes hash that differs, the model's
// state will be `set` again.
save : function(attrs, options) {
  options || (options = {});
  if (attrs && !this.set(attrs, options)) return false;
  var model = this;
  var success = options.success;
  options.success = function(resp, status, xhr) {
    // ****
    // **** NEXT LINE SUCCESSFULLY SETS THE MODEL WITH THE SERVER RESPONSE
    // ****
    if (!model.set(model.parse(resp, xhr), options)) return false;
    if (success) success(model, resp, xhr);
  };
  options.error = wrapError(options.error, model, options);
  var method = this.isNew() ? 'create' : 'update';
  return (this.sync || Backbone.sync).call(this, method, this, options);
},

Answer 1

The save method is asynchronous. In other words, the model.set call inside save happens after the server has responded.

You are asking why the values are the same immediately after save is called. The answer is: at that point in time, the response has not been received by your code yet. The callback hasn’t been called. model.set hasn’t been called.

When you continue on and the event loop gets the response from the server (this may be a fraction of a second, it may be several seconds) later, your values will get set.