emberjs foundation 5 accordion

Question

Я новичок в emberjs и имею следующий шаблон с некоторыми полями в нем, который фиксирован и должен соответствовать некоторым полям в модели, но когда я использую аккордеон фон с ember js, он отображается хорошо , но когда я нажимаю на него, он не «разворачивается».

как получить emberjs и основу аккордеона для совместной работы? кажется, нажмите на HREF получает отправить хэштегом из URL

<script type="text/x-handlebars" id="entries"> 
    <div class="row "> 
     <dl class="accordion" data-accordion> 
      <dd> 
       <a href="#panel1">Accordion 1</a> 
       <div id="panel1" class="content"> 
        <label>Name</label> 
        {{input type="text" value=name}} 
        <div class="row"> 
         <div class="large-6 columns"> 
          <label>Addresse</label> 
          {{input type="text" value=adress}} 
         </div> 
        </div> 
       </div> 
      </dd> 
     </dl> 
    </div> 

Answer 1

Вы должны назвать фундамент() после того, как был вставлен. Например, если этот шаблон для entry ресурса, вы должны сделать что-то вроде следующего в ваших EntryView «ы didInsertElement:

CoffeeScript:

EntryView = Ember.View.extend 
    didInsertElement: -> 
    @$().foundation() 

JavaScript:

var EntryView = Ember.View.extend({ 
    didInsertElement: function() { 
     this.$().foundation(); 
    } 
}); 

Answer 2

У меня была такая же проблема и она была решена путем повторной реализации некоторых действий Фонда. Фонд скрывает и показывает секции аккордеона путем добавления и удаления класса active элемента с классом content.

<div class="row "> 
    <dl class="accordion" data-accordion> 
     <dd> 
      <a href="#panel1">Accordion 1</a> 
      <div id="panel1" class="content"> 
       <!-- Closed panel --> 
      </div> 
     </dd> 
     <dd> 
      <a href="#panel2">Accordion 2</a> 
      <div id="panel2" class="content active"> 
       <!-- Open panel --> 
      </div> 
     </dd> 
    </dl> 
</div> 

Вы можете смоделировать в браузере Дев инструментов достаточно легко, но вы также можете привязать его к действию Ember, как это:

//my_view.js

App.MyView = Ember.View.extend({ 
    actions: { 
    toggle: function(selector) { 
     this.$(selector).toggleClass("active"); 
    } 
    } 
}); 

//template.hbs

<dd> 
    <a {{action "toggle" "#panel1" target="view">Accordion 1</a> 
    <div id="panel1" class="content"> 
    <!-- Closed panel --> 
    </div> 
</dd> 

Магия находится в помощнике action, который запускает функциональность в действии toggle, определенном в представлении. Вы передаете идентификатор содержимого div в качестве селектора в функцию переключения, который затем включает в себя или выключает класс active jQuery.

Что-то примечание - это target="view", в котором говорится, что Эмбер использует action на вид, а не на Ember Route вы находитесь под. Если это выглядит бесполезно для вас, вы можете поместить действие toggle на свой класс Route, но он больше похож на функцию просмотра.