Backbone.js嵌套視圖中的事件

Question

我有一個名為DashboardView的視圖，它實例化了多個WidgetView 。 每個小部件都需要有自己的事件綁定。 據我所知，當渲染視圖並將其添加到父視圖時，這些綁定會丟失，即：

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。

Answer 2

您的問題是delegateEvents期望您的視圖有一個不變的元素。 因為您的render函數每次都會創建一個新元素，所以當您單擊render生成的元素時， delegateEvents所做的綁定永遠不會被觸發。

幸運的是，當前版本的Backbone提供了一個setElement方法 ，該方法將使用您提供的參數重新分配元素，然后它將自動調用delegateEvents 。