web-dev-qa-db-fra.com

Utiliser Backbone avec WordPress AJAX API

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

admin-ajax.php? action = get_todos

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

admin-ajax.php? action = get_todos/9

où "9" est l'ID de la tâche en cours de suppression. En ajoutant à cet ID, l'appel AJAX du côté de WordPress est interrompu. Je peux remplacer manuellement les URL pour chacune des méthodes, mais j'aimerais savoir s'il existe un moyen plus élégant de faire en sorte que l'API AJAX fonctionne 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 de la valeur 0 AJAX provenant de WordPress.

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

ajaxrestfulbackbone
8
hereswhatidid

Vous devez remplacer la fonction Backbone.sync pour modifier l'URL utilisée pour l'appel AJAX. Vous pouvez apprendre du plugin wp-backbone fait ceci et plus encore. Ci-dessous, vous pouvez voir comment il change toutes les actions en POST ou GET, crée les paramètres, ajoute le paramètre action 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);
2
Seamus Leahy

Vous n'avez pas besoin de remplacer Backbone.sync car Backbone.sync remplacera sa propre requête $ .ajax avec les paramètres que vous transmettez en tant qu'options. Consultez ce lien pour découvrir comment fonctionne Backbone.sync 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 sous forme de données de poste normales côté serveur (avec votre modèle/vos modèles dans $_POST['payload']).

Cette méthode fait:

  • créer un tableau des remplacements nécessaires pour l'appel ajax.
  • activez 'POST classique' avec le paramètre emulateJSON: cela crée une syntaxe plus légère à la fois sur le front-end et sur le back-end. Sinon, vous devrez utiliser JSON.stringify sur le paramètre 'data'.
  • renvoyer le résultat d'un appel à Backbone.sync, avec une configuration par défaut de 'create' (POST), un ensemble de données de {modèle} ou {modèles} si une collection et nos propres remplacements.

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

2
Mauro Colella