Javascript Backbone.js嵌套视图中的事件

我有一个名为

DashboardView

的视图，它实例化了多个

WidgetView

s。每个小部件都需要有自己的事件绑定。据我所知，在呈现视图并将其添加到父视图时，这些绑定会丢失，即：

class DashboardView extends Backbone.View
  constructor: -> 
    context = @
    _.each @collection, (w)->
      dv = new app.WidgetView(model: w)
      context.$el.append(dv.render()) 

class WidgetView extends Backbone.View
  events: 
     "click .config" : "config_widget"

  render: ->
      _.template($("#widget-template").html(), @model)

这样做，小部件的

.config

元素上的单击事件现在将丢失。是否有更好的方法将嵌套视图混合到父视图中，同时确保正确引导子视图上的事件处理程序

---

我已经看到了解决这个问题的一个办法。这看起来是对的，但我很好奇是否有更优雅的方法来解决这个问题

您的问题是，

delegateEvents

希望您的视图有一个单一的、不变的元素。由于您的

render

函数每次都会创建一个新元素，因此当您单击

render

生成的元素时，

delegateEvents

生成的绑定永远不会触发

幸运的是，当前版本的主干提供了一个将使用您提供的参数重新分配您的元素，然后它将自动调用

delegateEvents

尝试以下操作：

class DashboardView extends Backbone.View
  constructor: -> 
    @collection.each ( w ) =>
      dv = new app.WidgetView( model: w )
      @$el.append dv.render().el // Append widget's @el explicitly

class WidgetView extends Backbone.View
  tagName: 'div' // or whatever your view's root element is

  template: _.template $( "#widget-template" ).html() // pre-compile template

  events: 
    "click .config": "config_widget"

  render: ->
    @$el.html @template @model.toJSON() // append template to @el
    return this // return view

所以，这个想法是：

（1） 在

WidgetView

的

render

方法中，您可以通过模板用模型数据填充

@el

（视图的根元素）。（请注意，我如何只编译一次模板——无需在每次渲染操作中编译模板。）

（2） 在

仪表板视图

中，将小部件的根元素--

@el

-附加到DOM中

---

问题是视图的事件委托给它的根元素--

@el

。因此，您需要明确地使用根元素：在

render

内部，填充它，然后将其附加到DOM。

我应该明确的一点是，我在一个仪表板中实例化了多个小部件。因此，我认为重新分配元素并不完全是我想要的，这正是我想要的。非常感谢。您可以通过使用来避免

上下文

内容。而且

@collection

应该已经下划线化了，所以

@collection.each（w）=>

是另一个选项。@mu Cool

：）

不知道胖箭头。