Backbone.js嵌套视图中的事件

Question

我有一个叫做DashboardView实例化多个WidgetViews 的视图.每个小部件都需要有自己的事件绑定.据我所知,当渲染视图并将其添加到父视图时,这些绑定会丢失,即:

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窗口小部件元素上的单击事件现在丢失了.是否有更好的方法将嵌套视图混合到父级中,同时确保子视图上的事件处理程序正确引导？

我在这篇文章中看到了一个解决这个问题的方法.这看起来是正确的,但我很好奇是否有更优雅的方法来解决这个问题.

Answer 1

试试这个:

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)在里面DashboardView,你将小部件的根元素 - @el- 附加到DOM.

问题是视图的事件委托给它的根元素 - @el.因此,您希望显式使用根元素:在内部render,填充它,然后将其附加到DOM.