Usando o Backbone com a API AJAX do WordPress

8

Estou tentando criar um simples plugin TODO usando o Backbone e encontrei um problema com a API AJAX. Para obter a chamada AJAX correta, você deve passar o parâmetro "action" como este:

admin-ajax.php? action = get_todos

que funciona bem para o método GET no Backbone. No entanto, ao usar o DELETE Backbone, usará um URL como este por padrão:

admin-ajax.php? action = get_todos / 9

onde "9" é o ID do todo que está sendo excluído. Ao adicionar esse ID, ele interrompe a chamada AJAX no lado do WordPress. Posso substituir manualmente os URLs de cada um dos métodos, mas gostaria de saber se existe uma maneira mais elegante de fazer com que a API AJAX funcione com o Backbone.

Eu criei um plug-in de demonstração que mostra o problema específico em que me deparei. Carregue a página de configurações e clique em qualquer um dos Xs enquanto assiste ao seu inspetor de rede para ver os resultados AJAX de 0 valor provenientes do WordPress.

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

ajax restful backbone hereswhatidid
fonte
+1 porque acho o tópico interessante, mas adicione as partes específicas / relevantes / que não estão funcionando do seu código à pergunta.
Kaiser #
Eu tentei isso antes e até agora não consegui funcionar. Em vez disso, usei as regras da API de reescrita do WordPres para obter o ID da postagem. Observe que eu o uso apenas para obter um arquivo morto (termo ou arquivo de postagem) como coleção e um único (tipo de postagem personalizada ou de postagem) como modelo.
ifdion

Respostas:

2

Você precisa substituir a Backbone.syncfunção para alterar o URL usado para a chamada AJAX. Você pode aprender com o plugin wp-backbone faz isso e muito mais. Abaixo, você pode ver como ele altera todas as ações em um POSTou GET, criar os parâmetros, adicionar o actionparâmetro e muito mais.

(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
fonte
2

Você não precisa substituir, Backbone.syncpois o Backbone.sync substituirá sua própria solicitação $ .ajax com os parâmetros que você passa como opções. Consulte este link para obter uma explicação de como Backbone.syncfunciona internamente: http://backbonejs.org/docs/backbone.html#section-141

Você pode adicionar algo como o seguinte em seu modelo ou coleção:

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

E então processe os dados como dados regulares de publicação no lado do servidor (com seu modelo / modelos $_POST['payload']).

Este método faz:

  • crie uma matriz das substituições necessárias para a chamada ajax.
  • ative o 'POST clássico' com o emulateJSONparâmetro: cria uma sintaxe mais enxuta no frontend e no backend. Você precisaria usar JSON.stringify no parâmetro 'data' caso contrário.
  • retorne o resultado de uma chamada para Backbone.sync, com uma configuração padrão de 'create' (POST), um conjunto de dados de {model} ou {models} se uma coleção e nossas próprias substituições.

$_POST['payload'] em seguida, contém uma matriz de todos os seus dados do Backbone.

Mauro Colella
fonte