我如何創建動態手風琴組件EmberJS

Question

我發現一個現成的手風琴solution。我試圖使用它，但我不知道怎麼給這個組件可變數量的記錄：

我的組件模板：

{{#search-results-accordion 
    currentPage=currentPage 
    totalPages=meta.totalPages 
    items=items 
    onPageChange=(action "onPageChange") 
    as |item| 
}} 
    {{requisite-accordion-item item=item}} 
{{else}} 
... 
{{/search-results-accordion}} 

家長模板（搜索結果 - 手風琴）：

{{#if (gte items.length 1)}} 
    <div class="items" data-test-search-results> 
{{#cp-panels accordion=true as |panels|}} 
    {{#each items as |item index|}} 
    {{yield item panels=panels}} 
    {{/each}} 
{{/cp-panels}}} 
    </div> 
... 
{{/if}} 

孩子的模板（必要的 - 手風琴項）：

{{#panels.panel as |panel|}} 
    {{#panel.toggle}} 
     <p>Panel A</p> 
     <div class="name"><b>{{item.name}}</b></div> 
    {{/panel.toggle}} 
    {{#panel.body}} 
     {{item.info}} 
    {{/panel.body}} 
    {{/panels.panel}} 

然後我得到EmberError在控制檯中：「聲明失敗：名爲」panels.panel「的助手找不到」 enter image description here

我如何使用這個可變數量的記錄？

Answer 1

這裏是我的代碼中的觀察，

• 在搜索結果的accordion.hbs，而不是{{yield item panels=panels}}說{{yield item panels}}。
• 但你只item在組件模板被接受，但你應該得到item,panels和包括參數requisite-accordion-item item=item panels=panels}}

我沒有用過這個插件。對於調試，您可以嘗試{{log 'panels object' panels}}，它將在控制檯中打印對象。