Событие нажатия кнопки 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) {

     }

 });

Моя проблема в том, что если я создаю две кнопки и нажимаю только одну из них, я получаю окно предупреждения два раза, и отладка показывает мне "это "показывает первую кнопку первой, а вторую кнопку следующую.

Я что-то упустил?

Answer 1

Определенные вами события привязаны к свойству el в вашем представлении. В вашем случае это «тело», поэтому, когда вы запускаете клик с двумя экземплярами simpleButton, у вас есть 2 из них, слушающие одно и то же событие.

Каждый экземпляр, который вы создаете, должен представлять один и только один элемент DOM, определенный свойством el. Поэтому, если вы хотите создать вид кнопок (не уверен, что это «лучший метод» в реальной программе), вы можете получить:

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

Дайте вашим кнопкам уникальные идентификаторы, например, <button id="button1"> и <button id="button2">, затем в хэше событий вам нужно указать событие нажатия и идентификатор кнопки, которую вы хотите обработать этим событием.например,

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

Теперь он будет вызывать onClick () только тогда, когда вы нажимаете кнопку с id = button1 и вызываете doSomethingElse (), когда нажимаете кнопку с id = button2