4

私の質問は、ブートストラップアコーディオンを機能させる方法ではなく、「残り火」のやり方を理解していることを確認することです。

ここでブートストラップ アコーディオンの実例を作成しました (2013 年 3 月 12 日現在): http://jsfiddle.net/nrionfx/s59fA/

DEBUG: ——————————- 
DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1 
DEBUG: ——————————-

アコーディオンを適切に折りたたむには、controller.content 配列を監視するオブザーバーを作成する必要がありました。これを行わないと、 $().collapse を didInsertElement フックに配置しても、要素が挿入されたときにアコーディオンが折りたたまれませんでした。

App.IndexView = Em.View.extend
    templateName: 'index'
    contentObserver: ( ->
        Ember.run.next this, ->
            @.$('.collapse').collapse()
      ).observes('controller.content')

さて、これは機能しますが、私の質問は次のとおりです。これは、ember フレームワークでこれを行う適切な方法ですか、それとも didInsertElement 呼び出しなど、別の場所で行う必要がありますか?

---- 更新 ---- 最終的な jsFiddle: http://jsfiddle.net/nrionfx/s59fA/16/

4

2 に答える 2

2

独自のビューでアイテムをラップすることをお勧めします。この場合、didInsertElement フックを使用してロジックを実行できます。

したがって、ハンドルバーは次のようになります。

{{#each item in controller}}
   {{view App.ItemView contextBinding="item"}}        
{{/each}}

ループの現在の内容をこの新しいテンプレートに移動するだけです。ビューは次のようになります。

App.ItemView = Em.View.extend
    templateName: 'item'
    didInsertElement: ( ->
        Ember.run.next this, ->
            @.$().collapse()
      )

私はこれが最も大胆なアプローチになると思います。コントローラーのコンテンツのスワップごとにロジックが再実行されるわけではないため、これはより良いようです。すでに述べたように、didInsertElement フックは、サードパーティ ライブラリと統合するのに最適な場所です。

ヒント: IndexView の didInsertElement フックにロジックを配置したときは、含まれているコレクションがまだレンダリングされていないため、機能しませんでした。

于 2013-03-12T13:43:49.970 に答える
2

これは、ember フレームワークでこれを行う適切な方法ですか、それとも didInsertElement 呼び出しなど、別の場所で行う必要がありますか?

確かに、これを行う適切な場所は didInsertElement 経由です。@mavileinが述べたように、子要素ごとにビューを作成することでこれを行うことができます。

検討できるもう 1 つの方法は、afterRenderキューを使用することです。例えば：

App.IndexView = Em.View.extend
    templateName: 'index'
    contentObserver: ( ->
        Ember.run.next this, ->
            @.$('.collapse').collapse()
      ).observes('controller.content')

Ember実行ループに関する @machty の優れた投稿を確認するか 、Ember.CollectionView レンダリングの最後に jquery を実行してください。

于 2013-03-12T16:57:09.993 に答える