将Backbone与WordPress AJAX API结合使用

8

我正在尝试使用Backbone构建一个简单的TODO插件，并且遇到了AJAX API问题。为了获得正确的AJAX回调，您必须像这样传递“ action”参数：

admin-ajax.php？action = get_todos

对于Backbone中的GET方法，它工作正常。但是，在使用DELETE时，Backbone默认会使用如下所示的URL：

admin-ajax.php？action = get_todos / 9

其中“ 9”是要删除的待办事项的ID。通过添加此ID，可以中断WordPress端的AJAX调用。我可以手动覆盖每个方法的URL，但我想知道是否还有一种更优雅的方法来使AJAX API与Backbone一起使用。

我创建了一个演示插件，该插件显示了我遇到的具体问题。加载设置页面，然后在观看网络检查器的同时单击任意X，以查看来自WordPress的0值AJAX结果。

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

ajax restful backbone

— 这里
source

我觉得这个主题很有趣，所以+1，但是请在问题中添加代码的特定/相关/无效部分。

— kaiser

我之前曾尝试过，但到目前为止还没有奏效。相反，我使用WordPres Rewrite API规则来获取帖子ID。请注意，我仅使用它来获取一个存档（帖子类型存档或term）作为集合，并使用一个（帖子或自定义帖子类型）作为模型。

— ifdion

2

您需要重写该Backbone.sync功能，以更改用于AJAX调用的URL。您可以从插件wp-backbone了解更多信息。在下面，您可以从中看到如何将所有操作更改为POST或GET，创建参数，添加action参数等。

(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

您不需要覆盖，Backbone.sync因为Backbone.sync将使用您作为选项传递的参数覆盖其自己的$ .ajax请求。请参阅此链接以获取Backbone.sync内部工作方式的演练：http : //backbonejs.org/docs/backbone.html#section-141

您可以在模型或集合中添加以下内容：

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

然后在服务器端将数据作为常规发布数据进行处理（模型在中$_POST['payload']）。

此方法可以：

创建一个用于ajax调用的必要替代的数组。
使用emulateJSONparam 启用“经典POST” ：它使前端和后端的语法更加精简。否则，您将不得不在'data'参数上使用JSON.stringify。
返回对Backbone.sync的调用结果，默认配置为'create'（POST），{model}或{models}的数据集（如果有集合），以及我们自己的覆盖。

$_POST['payload'] 然后包含所有主干数据的数组。

— 毛罗·科雷拉（Mauro Colella）
source