Question

我有一个与一个Model关联的EditorView子视图，它呈现一系列表单元素（输入复选框，textarea）。

我的ListView创建 一个且只有一个 编辑器子视图。单击ListView中的项目时，ListView通过new EditorView(model: this.model). render();创建EditorView。

这很有效。

但是，当一个事件附加到编辑器子视图

时

  // 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将处理程序附加到视图的根元素，因此当您使用相同的根元素创建多个视图时，会多次注册回调。它使用event bubbling来检测在子元素上触发的事件。问题出在这一行：

el: ".editor",

即使您删除了.editor的所有内容，该元素本身的处理程序也会保留。您需要删除它，或者如果要保留它，您可以在创建新视图之前使用视图的undelegateEvents方法：它将删除以前连接的事件处理程序。

骨干事件多次被解雇

1 个答案: