Usando Backbone con la API AJAX de WordPress

8

Estoy intentando construir un complemento TODO simple usando Backbone y me he encontrado con un problema con la API AJAX. Para recuperar la llamada AJAX correcta, debe pasar el parámetro "acción" de esta manera:

admin-ajax.php? action = get_todos

que funciona bien para el método GET en Backbone. Sin embargo, cuando use DELETE Backbone usará una URL como esta por defecto:

admin-ajax.php? action = get_todos / 9

donde "9" es la ID del trabajo que se está eliminando. Al agregar esta identificación, interrumpe la llamada AJAX en el lado de WordPress. Puedo anular manualmente las URL para cada uno de los métodos, pero me gustaría saber si hay una forma más elegante de hacer que la API AJAX funcione con Backbone.

He creado un complemento de demostración que muestra el problema específico en el que me he encontrado. Cargue la página de configuración y haga clic en cualquiera de las X mientras mira su inspector de red para ver los resultados de AJAX de valor 0 procedentes de WordPress.

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

ajax restful backbone

— hereswhatidid
fuente

Haga +1 porque el tema me parece interesante, pero agregue las partes específicas / relevantes / que no funcionan de su código a la pregunta.

— Kaiser

Intenté esto antes y hasta ahora no lo tengo funcionando. En su lugar, utilicé las reglas de API de reescritura de WordPres para obtener la identificación de la publicación. Tenga en cuenta que solo lo uso para obtener un archivo (tipo o archivo de publicación) como colección y un solo (tipo de publicación o publicación personalizada) como modelo.

— ifdion

2

Debe anular la Backbone.syncfunción para cambiar la URL utilizada para la llamada AJAX. Puedes aprender del plugin wp-backbone hace esto y más. A continuación, puede ver cómo cambia todas las acciones en POSTo GET, crea los parámetros, agrega el actionparámetro y más.

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

— Seamus Leahy
fuente

2

No necesita anular Backbone.syncya que Backbone.sync anulará su propia solicitud $ .ajax con los parámetros que pase como opciones. Consulte este enlace para ver un tutorial sobre cómo Backbone.syncfunciona internamente: http://backbonejs.org/docs/backbone.html#section-141

Puede agregar algo como lo siguiente en su modelo o colección:

save: function(){
    var $params = {
        emulateJSON: true, 
        data: { 
                 action: 'your_wp_ajax_action', 
                 payload : this.toJSON() 
              } 
        };

    //return $.post(this.url, $params, null);

    return Backbone.sync( 'create', this, $params );
}

Y luego procese los datos como datos de publicación regulares en el lado del servidor (con su modelo / modelos en $_POST['payload']).

Este método hace:

cree una matriz de las anulaciones necesarias para la llamada ajax.
active 'POST clásico' con el emulateJSONparámetro: crea una sintaxis más ágil tanto en la interfaz como en el servidor. Tendría que usar JSON.stringify en el parámetro 'data' de lo contrario.
devuelve el resultado de una llamada a Backbone.sync, con una configuración predeterminada de 'crear' (POST), un conjunto de datos de {modelo} o {modelos} si se trata de una colección, y nuestra propia anulación.

$_POST['payload'] luego contiene una matriz de todos sus datos de Backbone.

— Mauro Colella
fuente