Using Backbone with the WordPress AJAX API

by

I’m attempting to build out a simple TODO plugin using Backbone and have run into an issue with the AJAX API. In order to get the correct AJAX call back you have to pass in the “action” parameter like this:

admin-ajax.php?action=get_todos

which works fine for the GET method in Backbone. However, when using DELETE Backbone will use a URL like this by default:

admin-ajax.php?action=get_todos/9

where “9” is the ID of the todo being deleted. By adding on this ID it breaks the AJAX call on the WordPress side. I can manually override the URLs for each of the methods but I’d like to know if there’s a more elegant way to get the AJAX API to work with Backbone.

I’ve created a demo plugin which shows the specific issue I’ve run in to. Load the settings page and click on any of the X’s while watching your Network inspector to see the 0 value AJAX results coming from WordPress.

https://github.com/hereswhatidid/wordpress-todo-backbone-demo

2 s
2

You need to override the Backbone.sync function to change the URL used for the AJAX call. You can learn from the plugin wp-backbone does this and more. Below you can see from it how it changes all the actions into either POST or GET, create the parameters, add the action parameter and more.

(function($) {
Backbone.sync = function(method, model, options) {

    var params = _.extend({
        type:         'POST',
        dataType:     'json',
        url: wpBackboneGlobals.ajaxurl,
        contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
    }, options);

    if (method == 'read') {
        params.type="GET";
        params.data = model.id
    }

    if (!params.data && model && (method == 'create' || method == 'update' || method == 'delete')) {
        params.data = JSON.stringify(model.toJSON());
    }


    if (params.type !== 'GET') {
        params.processData = false;
    }

    params.data = $.param({action:'backbone',backbone_method:method,backbone_model:model.dbModel,content:params.data});

    // Make the request.
    return $.ajax(params);


};

})(jQuery);

Leave a Comment