How to override Backbone.sync so it adds the apikey and username at the end?

Question

I am using backbone-tastypie, but I am having the toughest time getting it to work properly. In Tastypie, I am using ApiKeyAuthentication for my resources, so every ajax req

Answer 1

Let's explore the possibilities

Using headers

Backbone.sync still just uses jQuery ajax so you can override ajaxSend and use headers to send information along.

$(document).ajaxSend(function(e, xhr, options) 
{
    xhr.setRequestHeader("username", window.app.settings.credentials.username);
    xhr.setRequestHeader("api_key", window.app.settings.credentials.api_key);
});

Using Ajax Options

If you need to send the information in just one or two locations, remember that the destroy, fetch, update and save methods are just shortcuts to the ajax caller. So you can add all jQuery ajax parameters to these methods as such:

// Remove the goal update view from the DOM
removeItem: function ()
{
    this.model.destroy({
        wait: true,
        success: function () 
        {
            console.log("success");
        },
        error: function ()
        {
            console.log("error");
        },
        data: 
        {
            username: window.app.settings.credentials.username,
            api_key: window.app.settings.credentials.api_key
        }
    });
}

Overriding jQuery's ajax method

Depending on your needs, this might be the better implementation (note that this is no production code, you may need to modify this to fit your needs and test this before using it)

(function ($) {
    var _ajax = $.ajax;
    $.extend(
    {
        ajax: function (options)
        {
            var data = options.data || {}; 
            data = _.defaults(data, {
                username: window.app.settings.credentials.username,
                api_key: window.app.settings.credentials.api_key
            });
            options.data = data;
            return _ajax.call(this, options);
        }
    });
})(jQuery);

Answer 2

Just for future readers of this post, when you do a model.destroy() you can't pass any data because the delete request doesn't have a body, see this issue for more info: https://github.com/documentcloud/backbone/issues/789