javascript - Backbone.js 按钮单击事件会针对按钮的所有实例触发，而不仅仅是被单击的实例。为什么？

Question

我正在学习backbone.js，而且还是个新手。我有一个充当按钮的 View :

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

您定义的事件绑定(bind)到 View 的“el”属性。在您的情况下，它是“body”，因此当您启动实例化的 2 个 simpleButton View 时，您将有 2 个 View 监听同一事件。

您实例化的每个 View 都应该代表一个且唯一一个由 el 属性定义的 DOM 元素。因此，如果您想创建一个按钮 View (不确定这是否是真实程序中的“最佳实践”)，您可以:

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 的成本很高)...