如何使用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選擇兩個不同的組件來演示它的樣子。