javascript - Backbone View 事件在父 View 重新渲染时失去委托(delegate)

Question

我已经看到这个问题出现过几次，但我自己却无法解决 - 或者我不太理解答案。许多事情都在谈论使用 .empty().append() 而不是 .html() 以及关于确保始终引用 View 的 $el 值而不是直接访问 DOM。仍然没有骰子。

如果您查看此 jsbin，您会发现更改选择框值会在第一次重新呈现包装器 View ，但随后对后续更改不执行任何操作 - 它会丢失其事件。

http://jsbin.com/fuvoba/7/edit (向任何讨厌 coffeescript 的人道歉)

知道为什么会这样吗？

非常感谢，一如既往地提前上网:)

编辑 - 我想我也会包含内联代码:

class ArchivesDropdownView extends Backbone.View
  template: '<select><option>One</option><option>Two</option></select>'
  initialize: () ->
    console.log 'Initialised the select dropdown'
  render: () ->
    this.$el.find('#dropdown').empty().append @template
    console.log 'Rendered the select dropdown'
    return this
  events:
    'change select': 'updateSelect'
  updateSelect: () ->
    console.log 'Updated select dropdown.'
    wrapperView.render()


class WrapperView extends Backbone.View
  template: 'Please select: <div id="dropdown"></div><div id="random"><%=randomNum%></div>'
  render: () ->
    console.log 'Rendered the wrapper'

    this.$el.empty().append _.template(@template)(randomNum: Math.random())

    if !this.archivesDropdownView
      this.archivesDropdownView = (new ArchivesDropdownView().render())

    this.archivesDropdownView.render()

    return this


wrapperView = new WrapperView()
$('body').empty().append wrapperView.render().$el

Answer 1

在将 View $el 应用到另一个 View 后添加 this.archivesDropdownView.delegateEvents()。

  this.$el.find('#dropdown').empty().append this.archivesDropdownView.$el
  this.archivesDropdownView.delegateEvents()

但我不喜欢你的架构，你应该使用 subview 的全局引用来渲染父 View 。改用事件，例如在父 View 和 subview 之间共享模型，并从 subview 触发事件以重新渲染父 View 。

这是一个工作示例 http://jsbin.com/dehujecejape/1/edit