2

我正在学习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”的调试首先显示第一个按钮，然后是第二个按钮。

我错过了什么吗？

4

4 回答 4

4

您定义的事件绑定到视图的“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。

注意：render 函数的主干思想是创建一个 html 字符串，之后您将使用它来追加 prepend 或 DOM 中的任何内容。这样，如果你创建了很多，你就可以这样做，所以你只刷新一次 DOM（刷新 DOM 很昂贵）......

于 2011-08-23T10:10:07.220 回答
3

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

initialize : function() {
    $(this.el).unbind("click");
}
于 2012-11-27T14:54:42.197 回答
1

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

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

于 2011-11-03T05:46:24.323 回答
0

为您的按钮提供唯一的 id，例如<button id="button1">和<button id="button2">，然后在您的事件哈希中，您需要指定单击事件和您要为其处理该事件的按钮的 id，例如：

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

现在这只会在您单击 id=button1 的按钮时调用 onClick() 并在单击 id=button2 的按钮时调用 doSomethingElse()

于 2011-08-24T07:51:58.313 回答