Utiliser Backbone avec l'API WordPress AJAX

8

J'essaie de créer un plugin TODO simple à l'aide de Backbone et j'ai rencontré un problème avec l'API AJAX. Afin d'obtenir le rappel AJAX correct, vous devez passer le paramètre "action" comme ceci:

admin-ajax.php? action = get_todos

qui fonctionne bien pour la méthode GET dans Backbone. Cependant, lorsque vous utilisez DELETE Backbone, une URL comme celle-ci sera utilisée par défaut:

admin-ajax.php? action = get_todos / 9

où "9" est l'ID de la tâche à supprimer. En ajoutant cet ID, il rompt l'appel AJAX du côté WordPress. Je peux remplacer manuellement les URL de chacune des méthodes, mais j'aimerais savoir s'il existe un moyen plus élégant de faire fonctionner l'API AJAX avec Backbone.

J'ai créé un plugin de démonstration qui montre le problème spécifique auquel j'ai été confronté. Chargez la page des paramètres et cliquez sur l'un des X tout en regardant votre inspecteur de réseau pour voir les résultats AJAX à 0 valeur provenant de WordPress.

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

ajax restful backbone

— hereswhatidid
source

+1 car je trouve le sujet intéressant, mais veuillez ajouter les parties spécifiques / pertinentes / non fonctionnelles de votre code à la question.

— kaiser

J'ai essayé cela avant et jusqu'à présent je ne l'ai pas fait fonctionner. Au lieu de cela, j'ai utilisé les règles de l'API de réécriture WordPres pour obtenir l'ID de publication. Notez que je ne l'utilise que pour obtenir une archive (archive ou terme de type de publication) comme collection et une seule (type de publication ou type de publication personnalisé) comme modèle.

— ifdion

2

Vous devez remplacer la Backbone.syncfonction pour modifier l'URL utilisée pour l'appel AJAX. Vous pouvez apprendre du plugin wp-backbone fait cela et plus encore. Ci-dessous, vous pouvez voir comment il transforme toutes les actions en POSTou GET, créez les paramètres, ajoutez le actionparamètre et plus encore.

(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
source

2

Vous n'avez pas besoin de remplacer Backbone.synccar Backbone.sync remplacera sa propre demande $ .ajax avec les paramètres que vous passez en tant qu'options. Consultez ce lien pour découvrir comment Backbone.syncfonctionne en interne: http://backbonejs.org/docs/backbone.html#section-141

Vous pouvez ajouter quelque chose comme ce qui suit dans votre modèle ou votre collection:

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

Ensuite, traitez les données en tant que données de publication régulières côté serveur (avec votre ou vos modèles $_POST['payload']).

Cette méthode:

créer un tableau des remplacements nécessaires pour l'appel ajax.
activez 'classic POST' avec le emulateJSONparam: cela permet une syntaxe plus légère à la fois sur le frontend et le backend. Sinon, vous devrez utiliser JSON.stringify sur le paramètre 'data'.
renvoie le résultat d'un appel à Backbone.sync, avec une configuration par défaut de 'create' (POST), un ensemble de données de {model} ou {models} si une collection, et nos propres substitutions.

$_POST['payload'] contient alors un tableau de toutes vos données Backbone.

— Mauro Colella
source