Design, Build and Release

Ramblings of IainJMitchell on C#, Javascript and Software Craftsmanship

Using JSONP with Backbone JS

5 comments

JSON with Padding (JSONP) is a mechanism to support the retrieval of data from a server in a different domain. This is achieved by exploiting the fact that the HTML <script> element can be retrieved from an external domain.

By default, Backbone JS is unable to retrieve collection or model data from a url in a different domain. This is because Backbone is using the jQuery AJAX call with a data type of JSON rather than JSONP.

So, how do we change Backbone to use a data type of JSONP in its AJAX requests for a particular model or collection? The solution is to provide an overridden sync() function on the model/collection. Sync() is called by Backbone when a model/collection is synced with the data source at the url. Normally, it just calls the standard Backbone.sync() function, but overriding this function allows us to access and alter the options being passed to the jQuery AJAX call.

In the example below, a collection is defined that connects to the Twitter API to retrieve my last 5 tweets. The sync() function has been overridden and the AJAX options have been altered to use JSONP as a datatype (plus an increase in the timeout). After the options have been adjusted it is necessary to make a call to the standard Backbone.sync() function and return the results.

var TweetCollection = Backbone.Collection.extend({
  model: Tweet,
  url: "http://search.twitter.com/search.json?q=from:iainjmitchell+OR+@iainjmitchell&rpp=5",
  sync: function(method, model, options){
    options.timeout = 10000;
    options.dataType = "jsonp";
    return Backbone.sync(method, model, options);
  }
});

Here is an example of a jQuery twitter plugin that uses Backbone JS JSONP calls.

Written by IainJMitchell

September 27th, 2011 at 11:00 am

5 Responses to 'Using JSONP with Backbone JS'

Subscribe to comments with RSS or TrackBack to 'Using JSONP with Backbone JS'.

  1. You certainly can do it the way you are describing, but you can also add ‘&callback=?’ to the end of your URL and Backbone/jQuery will automatically change the dataType to jsonp….

    James Brown

    29 Sep 11 at 4:46 pm

  2. Yes, that is an alternative way of doing it, though personally I prefer the more descriptive route of using the ajax options. I’m sure you’ll agree that it’s quite useful to know how to get to them and the model/collection in the sync process – the backbone documentation is a bit light in this area :)

    IainJMitchell

    30 Sep 11 at 4:54 pm

  3. Thinking about this again, you can actually do:

    this.fetch({ dataType : ‘jsonp’ });

    James Brown

    22 Feb 12 at 3:27 pm

  4. Thank you for this post !
    I’ve spend hours to figure out how to get fetch jsonp from my model and this example that i found did not work for me:

    sync: function(method, model, options) {
    var params = _.extend({
    type: ‘GET’,
    dataType: ‘jsonp’,
    url: model.url(),
    processData: false
    }, options);

    return $.ajax(params);
    },

    however, your example works perfect.
    I’m using it now to fetch wordpress posts as json to my backbone app.

    Ruslan

    7 Feb 13 at 2:35 pm

  5. [...] API to populate my collection and models. I’m following these previous posts (this and this) on doing JSONP requests with Backbone, but my collection still isn’t getting the data for [...]

Leave a Reply