0
のECMAScript 6つのボタン、コントロールクラスの2つのインスタンス
は、これまでのところ、ページ上の2つのボタンがあります編集および削除。もっと（コメントを追加するなど）あります。ですから、私はいくつかの一般的なアプローチを開発したいと思います。それぞれのボタンを個別に操作するだけではありません。
各ボタンは「カスタムコントロール」クラスであり、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ここについてオブジェクトが作成されます。
問題は、両方のボタンが削除要求をURLにトリガーすることです。削除ボタンは最後の2つです。ボタンの順序を変更すると、両方のボタンがリクエストを編集URLに送信します。
ControlManagerクラスの別のインスタンスを別のボタンに割り当てるという考えがなぜ機能しないのか理解してもらえますか？どのようにこの問題に最も優雅に対処するのですか？