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：＆＃34;断言失败：一个名为＆＃34; panels.panel＆＃34;无法找到＆＃34; 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}}。

我如何创建动态手风琴组件EmberJS

1 个答案: