Multiple-Outlet Components?

Proposals
1

I have a component that I use to make drop-down menus, and I’d like to let its consumers customize both the button for the drop-down, as well as the drop-down items themselves.

This got me thinking it could be nice to have Ember components with support for multiple, named outlets.

Using one might look like this:

{{#my-drop-down
   list-source=people
   action="personSelected"}}

  <button>Pick a Person</button>

{{&my-drop-down "list-item" item}}

  <li>
    <img src={{item.photo}}>
    {{item.name}}
  </li>

{{/my-drop-down}}

Which might be declared something like:

<div class="my-drop-down-target" action="toggleOpen">
  {{yield}}
</div>

{{#if isOpen}}
  {{#each list-source as |item|}}
    {{yield "list-item" item}}
  {{/each}}
{{/if}}

I think this could make for some very customizable components, does anyone think this might make a good addition to Ember?

Ninja-edit: Tried to fix the format on that second code block, mysteriously not working.

1 Like
2

I’m using this approach: Components with structured markup in ember.js v1.10

3

Interesting, that looks like it works pretty well.

I guess I haven’t made comments with arguments before. Would you mind showing me a sample implementation of that component?