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 字符串，您将在之后使用它来附加 prepend 或 DOM 中的任何内容。这样，如果您创建了很多，那么您只需刷新 DOM 一次（刷新 DOM 的成本很高）...

Answer 2

在您的视图中使用它。它将取消绑定点击事件

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

Answer 3

只是想，为应用程序中的每个按钮创建 Backbone.View 可能会导致性能过高，并且您无法利用 jQuery 中的“委托”功能。我会为这些按钮的父元素创建一个 Backbone.View 。

当然，如果您有一些具有复杂逻辑的特殊按钮，那么它们可能确实值得拥有自己的 View 类。 :)

Answer 4

为您的按钮提供唯一的 ID，例如 和 ，然后在您的事件哈希中，你需要指定点击事件和你想要处理该事件的按钮的id，例如：

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

现在只有当你点击id=button1的按钮并调用时才会调用onClick() doSomethingElse() 当你单击 id=button2 的按钮