Multiple-Outlet Components?


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:


  <button>Pick a Person</button>

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

    <img src={{}}>


Which might be declared something like:

<div class="my-drop-down-target" action="toggleOpen">

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

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.


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


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?