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

Question

G'day all，

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

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

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

links[i].href = links[i].href.replace((www\.)?imgur.com\/gallery\/
                , i + ".imgur.com");

“countries”是一个国家/地区对象数组，selectedCountry是其中一个国家/地区对象。

组件模板具有以下内容：

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

不幸的是，power-select组件使用空列表选项进行渲染。

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

有没有人有任何想法？

谢谢，

安迪

Answer 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中使用两个不同的组件来展示它的样子。