8

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 つの解決策は、この記事にあります。これは正しいように見えますが、これを解決するよりエレガントな方法があるかどうかに興味があります。

4

2 に答える 2

10

これを試して：

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で、テンプレートを介してモデルのデータを（ビューのルート要素）に入力します。（そして、テンプレートを1回だけコンパイルする方法に注意してください。レンダリング操作ごとにテンプレートをコンパイルする必要はありません。）

（2）内でDashboardView、ウィジェットのルート要素@el---をDOMに追加します。

重要なのは、ビューのイベントがそのルート要素に委任することです- @el。したがって、ルート要素を明示的に操作する必要があります。内部renderで、ルート要素にデータを入力してから、それをDOMに追加します。

于 2012-03-03T22:47:57.810 に答える
1

あなたの問題はdelegateEvents、ビューに単一の変更されない要素が必要であることです。render関数は毎回新しい要素を作成するため、delegateEventsによって生成された要素をクリックしても、 によって作成されたバインディングが起動されることはありませんrender。

幸いなことに、現在のバージョンの Backboneには、指定した引数を使用して要素を再割り当てし、自動的に を呼び出すsetElementメソッドdelegateEventsが用意されています。

于 2012-03-03T21:50:11.813 に答える