两个按钮，控制类

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

每个按钮都属于“自定义控件”类，并且应该发送一个AJAX请求。

走进我已经包括了请求所必需的信息的按钮标签（URL等）：

<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对象被创建。

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

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

来源

2016-11-24 Michael

constructor(button){    
     self = this;

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

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),

来源

2016-11-24 11:30:55 zeroflagL

两个按钮，控制类

回答

相关问题