Verwenden von Backbone mit der WordPress AJAX API

Ich versuche, ein einfaches TODO-Plugin mit Backbone zu erstellen, und bin auf ein Problem mit der AJAX-API gestoßen. Um den richtigen AJAX-Rückruf zu erhalten, müssen Sie den Parameter "action" wie folgt übergeben:

admin-ajax.php? action = get_todos

Dies funktioniert gut für die GET-Methode in Backbone. Bei Verwendung von DELETE Backbone wird jedoch standardmäßig eine URL wie die folgende verwendet:

admin-ajax.php? action = get_todos / 9

Dabei ist "9" die ID der zu löschenden Aufgabe. Durch Hinzufügen dieser ID wird der AJAX-Aufruf auf der WordPress-Seite unterbrochen. Ich kann die URLs für jede der Methoden manuell überschreiben, möchte aber wissen, ob es eine elegantere Möglichkeit gibt, die AJAX-API für die Arbeit mit Backbone zu verwenden.

Ich habe ein Demo-Plugin erstellt, das das spezifische Problem zeigt, auf das ich gestoßen bin. Laden Sie die Einstellungsseite und klicken Sie auf eines der X, während Sie Ihren Netzwerkinspektor beobachten, um die 0-Wert-AJAX-Ergebnisse von WordPress anzuzeigen.

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

Sie müssen die Backbone.syncFunktion überschreiben , um die für den AJAX-Aufruf verwendete URL zu ändern. Sie können vom Plugin lernen, dass wp-backbone dies und mehr tut. Unten sehen Sie, wie alle Aktionen in entweder POSToder geändert werden GET, erstellen Sie die Parameter, fügen Sie den actionParameter hinzu und vieles mehr.

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

Sie müssen nicht überschreiben, Backbone.syncda Backbone.sync seine eigene $ .ajax-Anforderung mit den Parametern überschreibt, die Sie als Optionen übergeben. Unter diesem Link finden Sie eine exemplarische Vorgehensweise zur Backbone.syncinternen Funktionsweise: http://backbonejs.org/docs/backbone.html#section-141

Sie können Ihrem Modell oder Ihrer Sammlung Folgendes hinzufügen:

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

Und dann verarbeiten Sie die Daten als reguläre Post-Daten auf der Serverseite (mit Ihrem Modell / Ihren Modellen in $_POST['payload']).

Diese Methode macht:

• Erstellen Sie ein Array der erforderlichen Überschreibungen für den Ajax-Aufruf.
• emulateJSONAktivieren Sie 'classic POST' mit dem Parameter: Dies sorgt für eine schlankere Syntax sowohl im Frontend als auch im Backend. Andernfalls müssten Sie JSON.stringify für den Parameter 'data' verwenden.
• Geben Sie das Ergebnis eines Aufrufs von Backbone.sync mit der Standardkonfiguration 'create' (POST), einem Dataset von {model} oder {models}, falls eine Sammlung vorhanden ist, und unseren eigenen Überschreibungen zurück.

$_POST['payload'] Enthält dann ein Array aller Ihrer Backbone-Daten.