Adding functionality to Backbone Models?

Question

I'm trying to figure out the "correct" way of accomplishing custom update functions in Backbone.js Models. An example of what I'm trying to do is:

var Cat = Backbone.Model.extend({

  defaults: {
    name     : 'Mr. Bigglesworth',
    location : 'Living Room',
    action   : 'sleeping'
  },

  sleep: function () {
    // POST /cats/{{ cat_id }}/action
    // { action: "sleep" }
  },

  meow: function () {
    // POST /cats/{{ cat_id }}/action
    // { action: "meow" }
  }

})

From what I can tell, the Backbone.Collection.save() method only performs the following:

POST /cats/{{ cat_id }}
{ name: 'Mr. Bigglesworth', location: 'Living Room', action: '{{ value }} '}

But the API I'm working with won't let me change action that way, only by:

POST /cats/{{ cat_id }}/action
{ action: "{{ value }}" }

Hopefully that makes sense?

Any help would be appreciated.

Answer 1

You can pass the URL as a parameter when you call save. Maybe you can do something like this:

var Cat = Backbone.Model.extend({
  urlRoot: '/cats/',

  defaults: {
    name     : 'Mr. Bigglesworth',
    location : 'Living Room',
    action   : 'sleeping'
  },

  sleep: function () {
    var custom_url = this.urlRoot + this.id + "/action";
    this.save({}, { url: custom_url});
    // POST /cats/{{ cat_id }}/action
    // { action: "sleep" }
  },
});

See here: Posting form data using .save() to pass url parameters.

You can also implement the sync method to use another URL if you always want to use a custom URL on update. See for example here: backbone.js use different urls for model save and fetch.

Answer 2

There are different approaches you can take to solve this, but IMO the cleanest is to override Backbone.sync to act the way you want it to act if it's universal to the server backend you're connecting to.

For instance, if you want every one of your models/collections to interact with a particular backend implementation, this approach makes a lot of sense.

This way you can leave the rest of the Collection (or Model) code as the Backbone default but it will work the way you want it to work.

For example:

// Store the default Backbone.sync so it can be referenced later
Backbone.vanillaSync = Backbone.sync;

// Most of this is just copy-pasted from the original Backbone.sync
Backbone.sync = function(method, model, options) {
    var type = methodMap[method];

    // Default options, unless specified.
    _.defaults(options || (options = {}), {
      emulateHTTP: Backbone.emulateHTTP,
      emulateJSON: Backbone.emulateJSON
    });

    // Default JSON-request options.
    var params = {type: type, dataType: 'json'};

    // Ensure that we have a URL.
    if (!options.url) {
      params.url = _.result(model, 'url') || urlError();
    }

    // START ADD YOUR LOGIC HERE TO ADD THE /action

    // Add the action to the url
    params.url = params.url + '/' + options.action;

    // Remove the action from the options array so it isn't passed on
    delete options.action;

    // END ADD YOUR LOGIC HERE TO ADD THE /action    

    // Ensure that we have the appropriate request data.
    if (options.data == null && model && (method === 'create' || method === 'update' || method === 'patch')) {
      params.contentType = 'application/json';
      params.data = JSON.stringify(options.attrs || model.toJSON(options));
    }

    // For older servers, emulate JSON by encoding the request into an HTML-form.
    if (options.emulateJSON) {
      params.contentType = 'application/x-www-form-urlencoded';
      params.data = params.data ? {model: params.data} : {};
    }

    // For older servers, emulate HTTP by mimicking the HTTP method with `_method`
    // And an `X-HTTP-Method-Override` header.
    if (options.emulateHTTP && (type === 'PUT' || type === 'DELETE' || type === 'PATCH')) {
      params.type = 'POST';
      if (options.emulateJSON) params.data._method = type;
      var beforeSend = options.beforeSend;
      options.beforeSend = function(xhr) {
        xhr.setRequestHeader('X-HTTP-Method-Override', type);
        if (beforeSend) return beforeSend.apply(this, arguments);
      };
    }

    // Don't process data on a non-GET request.
    if (params.type !== 'GET' && !options.emulateJSON) {
      params.processData = false;
    }    

    // If we're sending a `PATCH` request, and we're in an old Internet Explorer
    // that still has ActiveX enabled by default, override jQuery to use that
    // for XHR instead. Remove this line when jQuery supports `PATCH` on IE8.
    if (params.type === 'PATCH' && window.ActiveXObject &&
      !(window.external && window.external.msActiveXFilteringEnabled)) {
      params.xhr = function() {
        return new ActiveXObject("Microsoft.XMLHTTP");
      };
    }

    // Make the request, allowing the user to override any Ajax options.
    var xhr = options.xhr = Backbone.ajax(_.extend(params, options));
    model.trigger('request', model, xhr, options);
    return xhr;
};

In the above example I assumed you had sent the action via the options array, if you actually wanted the static word /action you could just replace that block with:

// Add the action to the url
params.url = params.url + '/action';

This should give you the cleanest implementation while still keeping the rest of your code clean.