WordPress AJAX APIでのバックボーンの使用


8

私はBackboneを使用して単純なTODOプラグインを構築しようとしており、AJAX APIで問題が発生しました。正しいAJAXコールバックを取得するには、次のように "action"パラメータを渡す必要があります。

admin-ajax.php?action = get_todos

これは、バックボーンのGETメソッドで正常に機能します。ただし、DELETEバックボーンを使用すると、デフォルトで次のような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


トピックが興味深いと感じたときに+1しますが、コードの特定の/関連する/機能しない部分を質問に追加してください。
カイザー2013年

私は以前これを試しましたが、これまでのところ機能していません。代わりに、WordPres Rewrite APIルールを使用して投稿IDを取得しました。コレクションとしてのアーカイブ(投稿タイプarchiveまたはterm)およびモデルとしての単一(投稿またはカスタム投稿タイプ)を取得するためにのみ使用することに注意してください。
ifdion 2013年

回答:


2

Backbone.syncAJAX呼び出しに使用される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);

2

Backbone.syncBackbone.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 );
}

次に、データをサーバー側で通常の投稿データとして処理します(モデルは1つまたは複数$_POST['payload'])。

このメソッドは次のことを行います。

  • ajax呼び出しに必要なオーバーライドの配列を作成します。
  • emulateJSONparam で 'classic POST'をオンにします。これにより、フロントエンドとバックエンドの両方で無駄のない構文が作成されます。それ以外の場合は、「data」パラメーターでJSON.stringifyを使用する必要があります。
  • Backbone.syncへの呼び出しの結果を返します。デフォルトの構成は「作成」(POST)、コレクションの場合は{model}または{models}のデータセット、および独自のオーバーライドです。

$_POST['payload'] 次に、すべてのバックボーンデータの配列が含まれます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.