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

Question

G'day all,

I'm trying to wrap a component with another to provide a simplified editing wrapper.

The component is to conditionally show either a label or a select component that allows the user to pick the right value.

I want to wrap the power-select component, and pass it's values through to the sub-component, so the page template component reference looks like this:

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

"countries" is an array of country objects, and selectedCountry is one of those country objects.

The component template has the following:

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

Unfortunately the power-select component renders with an empty list of options.

I thought wrapping those parameters in handlebars might do the trick, but it seems that handlebars in handlebars isn't a valid syntax.

Does anyone have any ideas?

Thanks,

Andy

Answer 1

That should work, I created a twiddle for you, demonstrating your use case. You'll see I updated the your cm-select template to this:

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

Where you iterated over options for power-select in the cm-select component, I moved that down into the power-select template. It's better to try and encapsulate some functionality there, instead of having everything in cm-select. I wasn't sure what you had in mind with {{modelElement}} so I just demonstrate what it would look like, using two different components in cm-select.