web-dev-qa-db-ja.com

WordPressでバックボーンを使う AJAX API

私はBackboneを使って簡単なTODOプラグインを構築しようとしていて、AJAX AP​​Iの問題にぶつかっています。正しい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 AP​​IをBackboneで使用するためのより洗練された方法があるかどうかを知りたいです。

これまでに実行した特定の問題を示すデモプラグインを作成しました。設定ページを読み込み、ネットワークインスペクタを見ながらXのいずれかをクリックして、WordPressからの0の値AJAXの結果を確認します。

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

ajaxrestfulbackbone
8
hereswhatidid

AJAX呼び出しに使用されるURLを変更するには、Backbone.sync関数をオーバーライドする必要があります。あなたはプラグインから学ぶことができます 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);
2
Seamus Leahy

Backbone.syncは、オプションとして渡したパラメータを使用して独自の$ .ajaxリクエストをオーバーライドするため、Backbone.syncをオーバーライドする必要はありません。 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呼び出しに必要なオーバーライドの配列を作成してください。
  • emulateJSONパラメータを指定して 'classic POST'をオンにします。フロントエンドとバックエンドの両方でシンタックスシンタックスになります。それ以外の場合は、 'data'パラメータにJSON.stringifyを使用する必要があります。
  • backbone.syncの呼び出しの結果を返します。デフォルト設定は 'create'（POST）、データセットは{model}または{models}、コレクションの場合は独自のものです。

$_POST['payload']には、すべてのBackboneデータの配列が含まれています。

2
Mauro Colella