如何在 Ember 的组件中使用组件答案

【问题标题】：How to use a component from within a component in Ember如何在 Ember 的组件中使用组件
【发布时间】：2016-08-26 00:58:47
【问题描述】：

万事如意，

我正在尝试用另一个组件包装一个组件以提供简化的编辑包装器。

该组件将有条件地显示标签或选择组件，以允许用户选择正确的值。

我想包装 power-select 组件，并将其值传递给子组件，因此页面模板组件引用如下所示：

{{cm-select 
    title="Country ##" 
    options=countries 
    selected=selectedCountry 
    searchField="name" 
    action="selectCountry"
 }}

"countries" 是一个国家对象数组，并且 selectedCountry 是这些国家对象之一。

组件模板有以下内容：

<td>{{title}}</td>
 <td>
  {{#if edit}}
     {{#power-select
       options=options
       selected=selected
       searchField=searchField
        as |object|}}
        {{object.name}}
     {{/power-select}}
  {{else}}
      <small>{{modelElement}}</small>
  {{/if}}
</td>

不幸的是，power-select 组件呈现一个空的选项列表。

我认为将这些参数包装在把手中可能会奏效，但把手中的把手似乎不是有效的语法。

有人有什么想法吗？

谢谢，

安迪

【问题讨论】：

标签： ember.js components

【解决方案1】：

应该可以，我为您创建了一个twiddle，展示了您的用例。您会看到我将您的 cm-select 模板更新为：

{{title}} |
<button {{action 'toggleEdit'}}>Toggle Edit</button>
<br/>
{{#if edit}}
    Search for a Item via {{searchField}}
  <br/>
  {{power-select
    options=options
    selected=selected
    searchField=searchField
    onSelect=(action "itemSelected")
  }}
{{else}}
  {{search-list 
    options=options 
    searchField=searchField
    onSelect=(action "itemSelected")
  }}
{{/if}}

您在 cm-select 组件中迭代了 power-select 的选项，我将其移到了 power-select 模板中。最好尝试在那里封装一些功能，而不是将所有内容都放在 cm-select 中。我不确定您对 {{modelElement}} 有什么想法，所以我只是演示了它的外观，在 cm-select 中使用了两个不同的组件。

【讨论】：