Sử dụng xương sống với API AJAX của WordPress

Tôi đang cố gắng xây dựng một plugin TODO đơn giản bằng Backbone và đã gặp phải sự cố với AJAX API. Để nhận được cuộc gọi AJAX chính xác, bạn phải chuyển tham số "hành động" như thế này:

quản trị-ajax.php? hành động = get_todos

hoạt động tốt cho phương thức GET trong Backbone. Tuy nhiên, khi sử dụng DELETE Backbone sẽ sử dụng một URL như thế này theo mặc định:

quản trị-ajax.php? hành động = get_todos / 9

trong đó "9" là ID của việc cần làm bị xóa. Bằng cách thêm vào ID này, nó phá vỡ cuộc gọi AJAX ở phía WordPress. Tôi có thể ghi đè thủ công các URL cho từng phương thức nhưng tôi muốn biết liệu có cách nào hay hơn để API AJAX hoạt động với Backbone không.

Tôi đã tạo một plugin demo cho thấy vấn đề cụ thể mà tôi gặp phải. Tải trang cài đặt và nhấp vào bất kỳ X nào trong khi xem Trình kiểm tra mạng của bạn để xem kết quả AJAX giá trị 0 đến từ WordPress.

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

Bạn cần ghi đè Backbone.syncchức năng để thay đổi URL được sử dụng cho cuộc gọi AJAX. Bạn có thể học từ plugin wp-backbone làm điều này và hơn thế nữa. Dưới đây bạn có thể thấy từ đó cách nó thay đổi tất cả các hành động thành POSThoặc GET, tạo các tham số, thêm actiontham số và hơn thế nữa.

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

Bạn không cần ghi đè Backbone.syncvì Backbone.sync sẽ ghi đè yêu cầu $ .ajax của chính nó với các tham số bạn chuyển dưới dạng tùy chọn. Xem liên kết này để biết hướng dẫn về cách thức Backbone.synchoạt động trong nội bộ: http://backbonejs.org/docs/backbone.html#section-141

Bạn có thể thêm một cái gì đó như sau trong mô hình hoặc bộ sưu tập của bạn:

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

Và sau đó xử lý dữ liệu dưới dạng dữ liệu đăng thông thường ở phía máy chủ (với mô hình / mô hình của bạn trong $_POST['payload']).

Phương pháp này không:

• tạo một mảng các phần ghi đè cần thiết cho lệnh gọi ajax.
• bật 'POST cổ điển' với thông số emulateJSON: nó tạo ra cú pháp gọn hơn trên cả frontend và backend. Bạn sẽ phải sử dụng JSON.opesify trên thông số 'dữ liệu'.
• trả về kết quả của một cuộc gọi tới Backbone.sync, với cấu hình mặc định là 'tạo' (POST), bộ dữ liệu của {model} hoặc {model} nếu một bộ sưu tập và ghi đè của chúng ta.

$_POST['payload'] sau đó chứa một mảng của tất cả dữ liệu xương sống của bạn.