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 request, I need to append the apikey and username to the end of a request or send additional headers that add on the username and api key.

I am trying to remove a view and its model using backbone with the following code:

// 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");
  }});
},

After the function executes, the browser tries to do a GET request on the following URL:

:8000/api/v1/update/2/

It does not include the api_key or username at the end, and it has a trailing slash at the end of the url. I think it is trying to use Backbone.oldSync to do the GET request. How would I make it so the sync does include the username/api key at the end and removes the trailing slash?

In all of the other requests, I have made it so the api key and username is appended to the end of the http request by adding the following code to backbone-tastypie:

if ( !resp && ( xhr.status === 201 || xhr.status === 202 || xhr.status === 204 ) ) { // 201 CREATED, 202 ACCEPTED or 204 NO CONTENT; response null or empty.
  var location = xhr.getResponseHeader( 'Location' ) || model.id;
  return $.ajax( {
       url: location + "?" + "username=" + window.app.settings.credentials.username + "&api_key=" + window.app.settings.credentials.api_key,
       success: dfd.resolve,
       error: dfd.reject,
    });
}

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);