Menggunakan Backbone dengan WordPress AJAX API

8

Saya mencoba membuat plugin TODO sederhana menggunakan Backbone dan mengalami masalah dengan API AJAX. Untuk mendapatkan kembali panggilan AJAX yang benar, Anda harus memasukkan parameter "action" seperti ini:

admin-ajax.php? action = get_todos

yang berfungsi dengan baik untuk metode GET di Backbone. Namun, ketika menggunakan DELETE Backbone akan menggunakan URL seperti ini secara default:

admin-ajax.php? action = get_todos / 9

di mana "9" adalah ID dari todo yang dihapus. Dengan menambahkan ID ini, itu mematahkan panggilan AJAX di sisi WordPress. Saya dapat secara manual mengganti URL untuk masing-masing metode, tetapi saya ingin tahu apakah ada cara yang lebih elegan untuk membuat API AJAX bekerja dengan Backbone.

Saya telah membuat plugin demo yang menunjukkan masalah spesifik yang saya alami. Muat halaman pengaturan dan klik salah satu X sambil menonton inspektur Jaringan Anda untuk melihat nilai 0 hasil AJAX yang berasal dari WordPress.

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

ajax restful backbone hereswhatidid
sumber
Memberi +1 pada topik yang menurut saya menarik, tapi tolong tambahkan bagian spesifik / relevan / tidak berfungsi dari kode Anda ke pertanyaan.
kaiser
Saya sudah mencoba ini sebelumnya dan sejauh ini belum berhasil. Sebaliknya saya menggunakan aturan WordPres Rewrite API untuk mendapatkan id posting. Perhatikan bahwa saya hanya menggunakannya untuk mendapatkan arsip (arsip jenis posting atau istilah) sebagai koleksi dan satu (jenis posting atau posting kustom) sebagai model.
ifdion

Jawaban:

2

Anda perlu mengganti Backbone.syncfungsi untuk mengubah URL yang digunakan untuk panggilan AJAX. Anda dapat belajar dari plugin wp-backbone melakukan ini dan banyak lagi. Di bawah ini Anda dapat melihat bagaimana mengubah semua tindakan menjadi salah satu POSTatau GET, buat parameter, tambahkan actionparameter dan banyak lagi.

(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
sumber
2

Anda tidak perlu mengganti Backbone.synckarena Backbone.sync akan mengganti permintaan $ .ajax sendiri dengan parameter yang Anda berikan sebagai opsi. Lihat tautan ini untuk mengetahui cara Backbone.synckerjanya secara internal: http://backbonejs.org/docs/backbone.html#section-141

Anda dapat menambahkan sesuatu seperti yang berikut ini dalam model atau koleksi Anda:

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

Dan kemudian memproses data sebagai data posting biasa di sisi server (dengan model Anda / model di $_POST['payload']).

Metode ini:

  • buat array override yang diperlukan untuk panggilan ajax.
  • nyalakan 'POST klasik' dengan emulateJSONparam: itu membuat sintaks lebih ramping di kedua frontend dan backend. Anda harus menggunakan JSON.stringify pada parameter 'data' sebaliknya.
  • kembalikan hasil panggilan ke Backbone.sync, dengan konfigurasi default 'create' (POST), dataset {model} atau {model} jika koleksi, dan penggantian kami sendiri.

$_POST['payload'] kemudian berisi larik semua data Backbone Anda.

Mauro Colella
sumber