兩個按鈕，控制類

的兩個實例，到目前爲止，在頁面上的兩個按鈕：編輯和刪除。會有更多（添加評論等）。所以，我想開發一些通用的方法，而不是單獨對每個按鈕進行操作。

每個按鈕都屬於「自定義控件」類，並且應該發送一個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

兩個按鈕，控制類

回答

相關問題