Utilizzo di Backbone con l'API AJAX di WordPress

8

Sto tentando di creare un semplice plug-in TODO utilizzando Backbone e ho riscontrato un problema con l'API AJAX. Per ottenere la corretta chiamata AJAX è necessario passare il parametro "action" in questo modo:

admin-ajax.php? action = get_todos

che funziona bene per il metodo GET in Backbone. Tuttavia, quando si utilizza DELETE Backbone verrà utilizzato un URL come questo per impostazione predefinita:

admin-ajax.php? action = get_todos / 9

dove "9" è l'ID del todo da eliminare. Aggiungendo questo ID si interrompe la chiamata AJAX sul lato WordPress. Posso sovrascrivere manualmente gli URL per ciascuno dei metodi, ma vorrei sapere se esiste un modo più elegante per far funzionare l'API AJAX con Backbone.

Ho creato un plugin demo che mostra il problema specifico in cui mi sono imbattuto. Carica la pagina delle impostazioni e fai clic su una delle X mentre guardi il tuo ispettore di rete per vedere i risultati AJAX con valore 0 provenienti da WordPress.

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

ajax restful backbone

— hereswhatidid
fonte

+1 poiché trovo l'argomento interessante, ma per favore aggiungi le parti specifiche / pertinenti / non funzionanti del tuo codice alla domanda.

— Kaiser

L'ho provato prima e finora non ho funzionato. Invece ho usato le regole API di riscrittura di WordPres per ottenere l'ID post. Si noti che lo uso solo per ottenere un archivio (archivio di tipo post o termine) come raccolta e un singolo (tipo di post o post personalizzato) come modello.

— ifdion,

2

È necessario sostituire la Backbone.syncfunzione per modificare l'URL utilizzato per la chiamata AJAX. Puoi imparare dal plug -in wp-backbone che fa questo e altro. Di seguito puoi vedere come cambia tutte le azioni in uno POSTo GET, crea i parametri, aggiungi il actionparametro e altro.

(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

Non è necessario eseguire l'override Backbone.syncpoiché Backbone.sync sostituirà la propria richiesta $ .ajax con i parametri passati come opzioni. Vedi questo link per una panoramica di come Backbone.syncfunziona internamente: http://backbonejs.org/docs/backbone.html#section-141

Puoi aggiungere qualcosa come il seguente nel tuo modello o collezione:

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

Quindi elabora i dati come normali dati postali sul lato server (con il tuo modello / i tuoi modelli $_POST['payload']).

Questo metodo fa:

creare una matrice delle sostituzioni necessarie per la chiamata ajax.
attiva il "POST classico" con il emulateJSONparametro: crea una sintassi più snella sia sul frontend che sul backend. Altrimenti dovresti usare JSON.stringify sul parametro 'data'.
restituisce il risultato di una chiamata a Backbone.sync, con una configurazione predefinita di "create" (POST), un set di dati di {modello} o {modelli} se una raccolta e le nostre sostituzioni.

$_POST['payload'] quindi contiene un array di tutti i tuoi dati Backbone.

— Mauro Colella
fonte