Backbone - 在一个 $el 上绑定多个视图（事件重复）答案

【问题标题】：Backbone - bind multiple views on one $el (events are duplicated)Backbone - 在一个 $el 上绑定多个视图（事件重复）
【发布时间】：2014-05-03 09:32:20
【问题描述】：

我有一个容器 .js-todoslist 用于待办事项列表。对于每个 todolist，我也有几个视图 TodosListView。所有TodosListView 都是从父视图创建并绑定到同一个el .js-todoslist。

Todos 列表不会在初始化时呈现，我需要通过单击按钮来呈现不同的 Todos 列表，因此每个列表都有 showTodolist 显示它的方法。

问题是，虽然目前只有一个列表可以被渲染，但实际上所有列表都被初始化了。当我在渲染列表中按.add-btn 时，所有列表都触发了add 函数（不仅是当前渲染）。

TodosListView = Backbone.View.extend
  events:
    "click .add-btn": "add"

  initialize: (options) ->
    self = this
    @model = @options.model

    # I've tried to undelegate event after initialize, but no luck
    # @$el.undelegate('.add-btn', 'click');
    # @undelegateEvents()

  # show this todolist
  showTodolist: ->
    @$el.html @template(@model.toJSON())

  render: ->
    @

  add: ->
    console.log "Add to Todos list #" + @model.get("id")

如何避免这种情况（除了为每个列表创建不同的视图）？谢谢。

【问题讨论】：

试试主干的setElement方法
@meshuai，你的意思是在调用showTodolist之后使用setElement指定el属性？
渲染差异待办事项列表后

标签： javascript backbone.js backbone-views backbone-events

【解决方案1】：

您的问题是，由于您对不同的视图使用相同的 el，因此当您渲染视图时，它不会取消绑定前一个视图的事件。

在渲染视图之前，使用：

this.undelegateEvents();

【讨论】：