Backbone.js按鈕單擊事件將針對按鈕的所有實例觸發，而不是僅針對單擊的實例觸發。 為什么？

Question

我正在學習backbone.js，我很新。 我有一個視圖作為一個按鈕：

simpleButton = Backbone.View.extend({
     template: "<button class='${classes}'>${text}</button>",

     el: $("body"),

     events: {
         "click": "onClick",
         "focus": "onFocus",
         "blur": "onBlur"
     },

     initialize: function (args) {

         _.bindAll(this, 'render');
         this.rendered = false;
         this.text = args.text || 'button';
         this.classes = args.classes || [];
         this.classes.push('ui-button');
         //console.debug("Wh.views.simpleButton.initialize classes ",this.classes);
         if (args.autoRender === true) this.render();

     },

     render: function () {
         //console.debug("Wh.views.simpleButton.render classes ",this.classes);
         if (this.rendered === false) {
             $.tmpl(
                 this.template, {
                     classes: this.classes.join(' '),
                     text: this.text
                 }
             ).appendTo(this.el);
             this.rendered = true;
         }

     },

     //event handlers
     onClick: function (ev) {
         console.debug(this);
         alert("click on ", ev, this);
     },

     onFocus: function (ev) {
         ////console.debug(ev);
     },

     onBlur: function (ev) {

     }

 });

我的問題是，如果我創建兩個按鈕，然后單擊其中一個按鈕，我會收到警報框兩次，調試顯示“this”首先顯示第一個按鈕，然后顯示第二個按鈕。

我錯過了什么嗎？

Answer 1

您定義的事件將綁定到視圖的“el”屬性。 在你的情況下它是“body”所以當你啟動點擊並實例化2個simpleButton視圖時，你有2個人在監聽同一個事件。

您實例化的每個視圖應該代表el屬性定義的一個且只有一個DOM元素。 因此，如果您想創建一個按鈕視圖（不確定這是真實程序中的“最佳實踐”），您可以：

SimpleButton =  Backbone.View.extend({
        template : "<button class='${classes}'>${text}</button>",

        tagName : "div", // defines the html tag that will wrap your template
        className: ".buttonbox", 
        ...
});

mybtn = new SimpleButton();
mybtn.render().appendTo('body')

這樣你的點擊事件只會涉及按鈕所在的div.buttonbox。

注意：渲染函數的骨干概念是創建一個html字符串，之后你將用它來追加DOM中的前置或其他內容。 這樣，如果你創建了很多，你可以這樣做，所以你只刷新一次DOM（刷新DOM是昂貴的）...

Answer 2

在您的View中使用它。它將取消綁定點擊事件

initialize : function() {
    $(this.el).unbind("click");
}

Answer 3

只是想到為應用程序中的每個按鈕創建一個Backbone.View可能會導致性能過度，並且您無法利用jQuery中的“委托”功能。 我改為為這些按鈕的父元素創建一個Backbone.View。

當然，如果你有一些具有復雜邏輯的特殊按鈕，那么他們可能應該得到他們自己的View類。 :)

Answer 4

為您的按鈕提供唯一的ID，例如<button id="button1">和<button id="button2"> ，然后在您的事件哈希中，您需要指定click事件和您要處理的按鈕的ID事件，例如：

events : {
        "click #button1" : "onClick",
        "click #button2" : "doSomethingElse"
    }

現在，只有在單擊id = button1的按鈕時調用onClick（），並在單擊id = button2的按鈕時調用doSomethingElse（）