backbone sync override, append url with query string?

Question

I have some trouble appending a token to the backbone url query string and hope you guys could help me out here. Three things to know,

• There is a rest api that expects a token with each request
• An nginx backend that does auth, serves the backbone app + proxy req to the api under /api
• i'm a new to javascript + backbone :/

The backbone app actually reads the token from a cookie and I need to append this to the request url everytime backbone makes a call. I see this can be done by overriding backbone sync. but it troubles me in a few different things. like, this is what I do

console.log('overriding backbone sync');
var key ="token";
Backbone.old_sync = Backbone.sync
Backbone.sync = function(method, model, options) {
    if (method === 'read') {
        if (!(model.url.indexOf('?key=') != -1)) {
            model.url = model.url + '?key=' + key;
        }
    } else {
        old_url = model.url();
        if (!(old_url.indexOf('?key=') != -1)) {
            model.url = function() {
                return old_url + '?key=' + key;
            }
        }
    }
    Backbone.old_sync(method, model, options);
};

model.url was returning a function when its not a "read" method and didn't know how to handle it well and the other trouble is when a consecutive request is made, the token is added twice. I tried to remove it with that indexOf stuff with no luck.

Is there a better way to do this ?

Answer 1

I don't think you need to override sync at all:

var globalKey = 'key123';

var urlWithKey = function(url, key) {
    return function() {
        return url + "?key=" + key;
    };
};

var MyModel = Backbone.Model.extend({
    url: urlWithKey('/my/url/', globalKey)
});

If you now create an object and save it, a POST request to my/url/?key=key123 is sent. I guess you could also override the url method if this is the behavior you need for all of your Backbone models.

A general note: in Backbone most parameters, such as url can be a function or a value. I don't know why in your example it was a function once and a value in another case, but you always must be able to handle both ways if you override some of the internal functions. If you look at Backbone's sourcecode you will see that they use getValue to access these parameters:

var getValue = function(object, prop) {
    if (!(object && object[prop])) return null;
    return _.isFunction(object[prop]) ? object[prop]() : object[prop];
};

Update: Overloading the url method for all models could work like this:

var globalKey = 'key123';

(function() {
    var baseUrl = Backbone.Model.prototype.url;
    Backbone.Model.prototype.url = function() {
        return this.baseUrl + "?key=" + globalKey;
    };
})()

var MyModel = Backbone.Model.extend({
   baseUrl: '/my/url/'
});

You could also leave the regular Backbone.Model as it is, and create your own base class. See http://documentcloud.github.com/backbone/#Model-extend for details.