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要素のクリックイベントは、現在失われています。子ビューのイベントハンドラが正しくチャネリングされていることを確認しながら、ネストされたビューを親にミックスするより良い方法はありますか？

私がこの問題に遭遇した解決策の1つは、this articleです。これは正しく見えますが、これを解決するよりエレガントな方法があれば私は興味があります。

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関数は毎回新しい要素を作成するため、によって生成された要素をクリックすると、delegateEventsによって作成されたバインディングは実行されません。

幸いなことに、現在のバージョンのBackboneでは、指定した引数で要素を再割り当てするsetElement methodが提供され、自動的にdelegateEventsが呼び出されます。