Question

I have a html wrapper app loading all js, css and images from ipad file storage. The UIWebView is therefore loaded with a different base href.

Loading of backbone data should go to server as normal. Is there a way to set base href in backbone – so backbone is realtive to server, not file storage? Maybe in a global way?

Answer 1

One option is to override the url or urlRoot property of each Collection or Model type you want to “re-base” like:

Article = Backbone.Model.extend({
  url: function() {
    return "http://myapiserver.com/articles/" + this.id;
    // Or slightly better, use some global for the base url and build from that
  }
});

If you have a lot of Model and Collection types and you want all of their urls to be re-based, you might be better served by overriding Backbone.sync (which is called by all of the model and collection CRUD operations) to override the url before it gets pumped into $.ajax(). You can do something like this:

// We'll call the "standard" Backbone.sync to do the real work, so grab a
// reference to it.
var oldSync = Backbone.sync;

Backbone.sync = function(method, model, options) {
    var url = _.isFunction(model.url) ? model.url() : model.url;

    if (url) {  // If no url, don't override, let Backbone.sync do its normal fail
        options = options || {};
        options.url = "http://myapiserver.com" + url;
    }

    // Let normal Backbone.sync do its thing
    return oldSync.call(this, method, model, options);
}

I haven’t tested that exact code, but I think it (or something close) should work.