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

Posted 2023-02-22

【中文标题】如何在 Ember 的组件中使用组件

【英文标题】：How to use a component from within a component in 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 组件呈现一个空的选项列表。

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

有人有什么想法吗？

谢谢，

安迪

【参考方案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 中使用了两个不同的组件。