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

Question

G'day全部，

我试图用另一个组件包装一个组件提供一个简化的编辑包装。

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

我想换电源选择组件，并使之通过该子组件的价值观，所以页面模板组件参考如下：

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

“国家”是国家的数组对象和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> 

不幸的是，电源选择部分与选项列表为空渲染。

我认为在handlebars中包装这些参数可能会诀窍，但似乎handlebars句柄不是一个有效的语法。

有没有人有任何想法？

感谢，

安迪

Answer 1

这应该工作，我创建了一个twiddle你，你的演示用例。你会看到我更新了您的CM-选择模板，以这样的：

{{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-选择组件选项，我感动的是，下入电源选择模板。最好尝试并封装一些功能，而不是将所有内容都放在cm选择中。我不确定{{modelElement}}是什么意思，所以我只是用cm选择两个不同的组件来演示它的样子。