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

Question

都好

我試圖將一個組件與另一個組件包裝在一起，以提供簡化的編輯包裝器。

該組件將有條件地顯示允許用戶選擇正確值的標簽或選擇組件。

我想包裝power-select組件，並將其值傳遞給子組件，因此頁面模板組件參考如下所示：

{{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>

不幸的是，電源選擇組件呈現的選項列表為空。

我以為將這些參數包裝在車把中可以解決問題，但似乎車把中的車把不是有效的語法。

有人有什么想法嗎？

謝謝，

安迪

Answer 1

那應該起作用，我為您創建了一個旋轉控件 ，演示了您的用例。 您會看到我將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中使用了兩個不同的組件。