add a custom method to a backbone model calling server, returning a simple data type

Question

Looking for some guidance on properly implementing custom logic on a model ("foo") using backbone.

We have a general requirement to avoid invocation direct .ajax calls (see below), and try to do everything consistently through the Backbone.js MV* framework.

I have implemented a method on the view (for lack of better place to put it), but I feel like this utility method would better be suited as a method on the model. I've read articles suggesting implementation of over-riding the backbone .sync method to add custom methods on a model, but the trouble is, that I'm not sure it's "correct" to do so, when the model is expecting an object, the REST service method I'm actually invoking returns a simple boolean (true/false) value.

Here is the code I have implemented:

var myView = Backbone.View.extend({
             initialize: function (options) {
                  ...
             },
             canDelete: function (parmOne, parmTWo){
                         var okToDelete;
                         var url = '/url/to/check/if/delete/is/ok/parmOne/ParmTwo';
                           $.ajax({
                                   async: false,
                                   type: "GET",
                                   url: url,
                                   success: function (valBool, response, jqXHR) {
                                       okToDelete = valBool;

                                    },
                                    error: function (data, textStatus, jqXHR) {
                                       notifyError(data.responseText)
                                    }
                          });

                          return okToDelete;
                        }
            });

Looking for suggestions on implementation to make this cleaner?

Thanks

Answer 1

You are right about not overwriting Backbone.sync . As per the docs :

By default, it uses jQuery.ajax to make a RESTful JSON request and returns a jqXHR. You can override it in order to use a different persistence strategy, such as WebSockets, XML transport, or Local Storage.

You'd override sync if you want to define a different peristence strategy .

Model-specific utility functions belong in the model

For a utility function like yours the correct place to implement it would be on the model .

var myModel = Backbone.Model.extend({
  canDelete: function (parmOne, parmTWo){
    var url = '/url/to/check/if/delete/is/ok/parmOne/ParmTwo';
    return $.ajax({
      async: false,
      type: "GET",
       url: url
    });
  }
});

In your view, you'd probably have an even bound to a delete function, say, deleteModel . Since we wired the model.canDelete method to return the $.ajax promise we can do the error checking in the view, like this:

var myView = = Backbone.View.extend({
  initialize: function (options) {
    ...
  },

  deleteModel: function(event) {
    var that = this;
    this.model.canDelete()
    .done(function (data) {
      // Do some stuff if ok to delete like:
      that.model.destroy();
    })
    .fail(function (data) {
      // Do some stuff if not ok to delete like:
      that.model.notifyError(data.responseText)
    });
  }
});

Of course you can keep your success/fail callbacks like you had them, if the model is only going to be used in a very limited manner.