我可以使用jquery-ui手風琴的ember.js

我有一個迭代控制器數組的模板 - 由於某種原因，我不能使用jquery-ui手風琴函數 - 我認爲這是由於添加標記餘燼增加了html例如<script type="text/x-placeholder" id="metamorph-1-start"></script>我可以使用jquery-ui手風琴的ember.js

任何想法如何解決這個問題？

這裏是代碼：

<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()

來源

2012-05-16 Gavriguy

由於科裏提到的問題是，對手風琴的內容不會呈現/插入DOM當你調用手風琴方法。一種解決方法是，您使用一個ember視圖作爲包裝，並在didInsertElement方法內調用accordion方法。我已經提供了一個fiddle一個工作示例。

基本上你的模板修改：

<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-16 17:17:07

謝謝！對我而言，另一個選項是明確設置手風琴的手柄選項爲'h3'：'$（'＃chat-tab-container'）。accordion（{handle：'h3'}）' – Gavriguy

用這種方法運行是，如果App.chatTabsController.content是一個ArrayController（在這個例子中我認爲是這樣），並且我在App.chatTabsController.content上推送額外的內容可能不會按預期行事。有了手風琴視圖，這可能不是問題，因爲我認爲在大多數情況下內容是非常靜態的，但對於其他像可拖放的jQuery小部件，數組中的新內容將呈現，但dom元素可能沒有所需的jQuery屬性正常工作。 –

這應該工作，因爲我在一個項目中使用它沒有問題。您是否曾嘗試在頁面完全加載後從控制檯調用$（'＃chat-tab-container'）。accordion（）？多數情況下，jQuery小部件的問題是由於內容控制器發生變化時內容未呈現或重新呈現而引起的。

這是可以克服的幾種方法：

使用Ember.View並掛接到didInsertElement或AfterRender階段回調。
如果因爲內容更改而導致視圖更新很多，您可以添加一個事件偵聽器，以便在鼠標進入小部件UI區域時調用$（'＃chat-tab-container'）accordion（）。我使用這種方法進行排序，手風琴和可拖動。

下面是一個例子：

$('body').on('mouseover', '#chat-tab-container', function(){ 
    $(this). accordion(); 
});

來源

2012-05-16 16:39:54

不錯的主意。只是我認爲使用jQuery的方法'one'更好。 – Saulius

我可以使用jquery-ui手風琴的ember.js

回答

相關問題