Question

ECMAScript 6

到目前为止，页面上有两个按钮：编辑和删除。会有更多（添加评论等）。所以，我想开发一些通用方法，而不是单独操作每个按钮。

每个按钮都是“自定义控制”类，应该发送一个AJAX请求。

在按钮标签中，我已经包含了请求所需的信息（网址等）：

<button id="main-object-delete" data-url="{{  object.get_delete_url }}" data-redirect="{{  object.get_delete_success_url }}" type="button" class="custom-main custom-control custom-delete btn btn-default " aria-label="Left Align">

代码：

$( document ).ready(function() {
    class GeneralManager {

        // Creates managers for each type of controls.

        constructor() {
            this.handle_buttons();

        } // constructor

        handle_buttons(){
            let $button_list = $('.custom-control')

            $button_list.each(function(index, button){
                let button_manager =  new ControlManager(button);
            });
        }

    } // GeneralManager


    function show_get_form(data,  button, url, redirect){
        let nest = button.closest(".custom-nest")
        nest.innerHTML = data;
        let act_cancel_manager = new SubmitCancelManager(url, redirect);
    }

    class ControlManager {
        // Operates on main object only.


        ajax_get(){         
            $.ajax({method: "GET",
                    url: self.url,              
                    success: function(data){ show_get_form(data, 
                                             self.button, 
                                             self.url,
                                             self.redirect); },
                    error: generalFail
                    });     
        } // ajax_get

        constructor(button){            
            self = this; // Protection against binding "this" to something else.
            this.button = button;
            this.url = this.button.getAttribute("data-url")         
            this.redirect = this.button.getAttribute("data-redirect")
            this.button.onclick = this.ajax_get;
        } // constructor        

    }

    let general_manager = new GeneralManager(); 
}); // $( document ).ready(function()

我们的想法是，每个按钮都会创建一个新的ControlManager对象。

问题是两个按钮都会触发对url的删除请求。删除按钮是两个中的最后一个。如果我更改按钮的顺序，两个按钮都会将请求发送到编辑网址。

您能帮我理解为什么我将ControlManager类的单独实例分配给不同按钮的想法不起作用。如何最优雅地解决这个问题？

Answer 1

constructor(button){            
        self = this;

这会创建一个名为self的（= 1）变量。所以第二个实例会覆盖第一个实例设置的值。

ajax_get(){         
  $.ajax({method: "GET",
          url: self.url,

这里你引用全局变量self。

忘记self并在必要时使用箭头功能：

ajax_get(){         
    $.ajax({method: "GET",
            url: this.url,              
            success: data => show_get_form(data, 
                                     this.button, 
                                     this.url,
                                     this.redirect),

两个按钮，两个控件类实例

1 个答案: