我如何创建动态手风琴组件 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

这是我在你的代码中的观察，

• 在 search-results-accordion.hbs 中，而不是 {{yield item panels=panels}} 说 {{yield item panels}}。
• 但是您在组件模板中只收到item，但您应该收到item,panels 并包含requisite-accordion-item item=item panels=panels}} 的两个参数

我没有使用过这个插件。对于调试，您可以尝试{{log 'panels object' panels}}，它将在控制台中打印对象。