0

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

我的 ListView 创建了一个且只有一个Editor 子视图。new EditorView(model: this.model). render();ListView 通过单击 ListView 中的项目来创建 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

谢谢

编辑器视图

  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);
  }
4

1 回答 1

1

Backbone 将处理程序附加到视图的根元素，因此当您创建具有相同根元素的多个视图时，会多次注册回调。它使用事件冒泡来检测在子元素上触发的事件。问题在于这一行：

el: ".editor",

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

于 2013-09-29T19:15:08.337 回答