骨干事件多次被解雇

Question

我有一個與一個Model關聯的EditorView子視圖，該子視圖呈現了一系列表單元素（輸入復選框，文本區域）。

我的ListView創建一個並且只有一個 Editor子視圖。 ListView通過new EditorView(model: this.model). render();創建new EditorView(model: this.model). render(); new EditorView(model: this.model). render(); 單擊ListView中的項目。

效果很好。

但是，當事件附加到“編輯器”子視圖時

  // Bind to all properties in the view
  events: {
     "click input.isactive":  "editActive"
  },

該事件被觸發多次...每個以前加載的EditorViews一次。 好像很多HTML仍然存在。 但是檢查DOM（在Firefox中）僅顯示一個EditorView的html。

我在EditorView中使用.html（string），我認為它將替換'el'元素中的先前html。

     var compiledTemplate = _.template( Template, data ); // Merge model with template
     this.$el.html( compiledTemplate );  // replace the previous html if any. ?? OR NOT!! SOAD

謝謝

EditorView

  el: ".editor",

  tagName: "ul",

  className : "striped",

  events: {
     "click .isactive":  "editActive"
  },

  render : function() {

     var data = {
       item: this.model,
       _: _ 
     };

     var compiledTemplate = _.template( Template, data ); // Merge model with template
     this.$el.empty().html( compiledTemplate );  // replace the previous html 
     return this;
  },


  editActive: function(e) {
        e.preventDefault();
        var x = this.$('.isactive').prop('checked'); // property of input checkbox
        alert('click'+x);

        var y = this.model.set('Active', x);
  }

Answer 1

Backbone將處理程序附加到視圖的根元素，因此當您使用相同的根元素創建多個視圖時，回調會被多次注冊。 它使用事件冒泡來檢測在子元素上觸發的事件。 問題在於此行：

el: ".editor",

即使刪除.editor所有內容，該元素本身的處理程序也會保留。 您需要刪除它，或者如果想要保留它，則可以在創建新視圖之前使用視圖的undelegateEvents方法：它將刪除以前附加的事件處理程序。