Могу ли я использовать ember.js с jquery-ui accordion

Question

У меня есть шаблон, который выполняет итерацию над массивом контроллера - и по какой-то причине я не могу использовать функцию jQuery-ui-гармоника - я думаю, что это связано с добавлением markup 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()

Answer 1

Как упоминалось Кори проблема заключается в том, что содержание для аккордеона не отображается/вставляется в DOM при вызове метода аккордеона. Один обходной путь заключается в том, что вы используете представление ember как оболочку и вызываете метод аккордеона внутри метода didInsertElement. Я привел рабочий пример 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(); 
    } 
});​ 

Answer 2

Это должно работать, как я использую его в проекте без проблем. Вы пытались вызвать $ ('# chat-tab-container'). Accordion() из консоли после полной загрузки страницы? Чаще всего проблема с виджетами jQuery возникает из-за того, что контент не отображается или повторно отображается при изменении контроллера содержимого.

Это можно преодолеть несколькими способами:

1. Используйте Ember.View и зацепить didInsertElement или afterRender обратных вызовов.
2. Если вы много раз обновляете данные из-за изменений содержимого, вы можете добавить прослушиватель событий для вызова $ ('# chat-tab-container'). Accordion(), когда мышь входит в область интерфейса виджета. Я использую этот подход для сортировок, аккордеонов и перетаскиваний.

Ниже приведен пример:

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