Backbone.sync success function not called

Question

I have a simple application that sends data to the server:

this.model.save(null, {success: dataSentOK});

and then delete data from the server@:

Backbone.sync("delete", data, {success: dataSentOK});

Both methods work against the server (add and delete the data).

However, in the second method, Backbone.sync(...), the success callback is not called.

Can anyone tell me what I am doing wrong? I've looked at the Backbone.js source code, I've tried and explicit function call:

{success: function(){
    console.log("Done");
}}

And various form of parameters:

{success: function(data, textStatus, jqXHR){
    console.log("Done");
}}

And nothing I do calls the success function.

Please help.

Thanks Adam

Answer 1

A better way to do this is by following a well established and powerful JavaScript events. Backbone fires four events that are rather significant: sync, error, destroy and invalid.

sync is fired when the sync operation is successful. error is fired when the sync operation fails. invalid is fired when validation fails (if you have that in place). destroy is fired when you destroy a model.

Therefore, I would personally bind to this event for the specific model you care about, if it's all of them, bind it in the model definition. For my purposes what I bind to an event changes based on context, so I bind it on a per-model basis within my views.

Example:

var MyModel = Backbone.Model.extend({
  // your model definition.
});

var MyView = Backbone.View.extend({
  // your view definition
  initialize : function() {
    this.model.on('sync', this.onSync);
    this.model.on('error', this.onError);
    this.model.on('destroy', this.onDestroy);
  },
  this.onSync : function(model, errors, options) {
    // your code
  },
  this.onError : function(model, errors, options) {
    // your code
  },
  this.onDestroy : function(model, errors, options) {
    // your code
  }
});

Answer 2

Backbone.js, under the covers, uses JQuery.ajax(...). So I solved my Backbone.js comms headaches by using JQuery directly.

Backbone believe they are adding value, by wrapping a perfectly good and functional API in their own code, because they have chosen to tightly couple their architecture between the model and transport protocols used to CRUD model objects.

The Model object must have a URL attribute, and this means you have to use the model's send(), fetch() etc function for network comms. Which, intern, means if you want your model to be just a DTO, then you can't use Backbone.js. It also means if you want to use JQuery directly, then you may as well not use their MVC architecture at all.

The implication of having a URL attached to the model object also implies the same URL should be used for all CRUD operations. Which does not make sense, particularly if your using REST services.

A good architecture will be modularized and follow the separation of concerns principle. It is a pity that Backbone.js does not do this as it is a framework that could be promising if only it wasn't so tightly coupled and difficult to use for the most simple of tasks.