2

コントローラー配列を反復処理するテンプレートがあります-何らかの理由でjquery-uiアコーディオン関数を使用できません-これは、追加されたマークアップemberがhtmlに追加するためだと思います。<script type="text/x-placeholder" id="metamorph-1-start"></script>

どうすればこれを修正できますか？

コードは次のとおりです。

<div id="chat-tab-container">

                <script type="text/x-handlebars">
                    {{#each App.chatTabsController}} 

                        <h3 class="row1">
                            <div class="avatar " style="background: red;">*</div>
                            <div class="contact-name ">{{contactName}}</div>
                        </h3>
                        <div class="row2">
                            <div class="contact-name ">content</div>
                        </div>

                        <h3 class="row1">
                            <div class="avatar " style="background: red;">*</div>
                            <div class="contact-name ">boni</div>
                        </h3>
                        <div class="row2">
                            <div class="contact-name ">content</div>
                        </div>

                    {{/each}}
                </script>

            </div>

そしてjquery呼び出し：$('#chat-tab-container').accordion()

4

2 に答える 2

3

Coryが述べたように、問題は、アコーディオンメソッドを呼び出したときに、アコーディオンのコンテンツがDOMにレンダリング/挿入されないことです。回避策の1つは、残り火ビューをラッパーとして使用し、didInsertElementメソッド内でアコーディオンメソッドを呼び出すことです。私は実際の例をフィドルに提供しました。

基本的に、テンプレートは次のように変更されます。

<script type="text/x-handlebars">
  {{#view App.TabView}}                     
    {{#each App.chatTabsController.content}} 
      <h3>{{contactName}}</h3>
      <div>content for {{contactName}}</div>
    {{/each}}
  {{/view}}
</script>

ビューのコード：

App.TabView = Ember.View.extend({
    tagName: 'div',        
    didInsertElement: function() {
        this.$().accordion();
    }
});​
于 2012-05-16T17:17:07.903 に答える
1

これは、プロジェクトで問題なく使用しているので機能するはずです。ページが完全に読み込まれたら、コンソールから$（'＃chat-tab-container'）。accordion（）を呼び出してみましたか？多くの場合、jQueryウィジェットの問題は、コンテンツコントローラーが変更されたときにコンテンツがレンダリングされないか再レンダリングされるという事実から発生します。

これはいくつかの方法で克服できます。

  1. Ember.Viewを使用して、didInsertElementまたはafterRenderコールバックにフックします。
  2. コンテンツの変更によりビューが大幅に更新される場合は、マウスがウィジェットのUI領域に入ったときに$（'＃chat-tab-container'）。accordion（）を呼び出すイベントリスナーを追加できます。私はこのアプローチを、ソート可能、アコーディオン、およびドラッグ可能によく使用します。

以下に例を示します。

$('body').on( 'mouseover', '#chat-tab-container', function(){
  $(this). accordion();
});
于 2012-05-16T16:39:54.843 に答える