consumer.hbs

<my-form as |input button|>
  {{! input and button isn't the whole component, rather a special object the represents only the yielded !}}
  <input.text> Hello World</text.input>
  <button.save>Save me!</save.button>
</my-form>

my-form.hbs

<h1> OMG, Hello world!!! </h1>
{{yield formInputs buttons}}

my-form.js

// This is not complete, its kinda shitty.

export default Component.extend({
  // ability to inject a factory on an instance
  MyLocalComponent: Ember.injectFactory('component:my-local-input'),
  MyButton: Ember.injectFactory('component:my-button-input'),
  inputs() {
    // createWith is a way to curry attributes for later creation.
    // this allows us to defer creation until the view layer actually needs to,
    // and has all information
    return {
      input: this.MyLocalComponent.createWith({
        form: this,
      })
    };
  },
  
  buttons() {
    return {
      save: this.MyButton.createWith({ form: this })
    };
  }
});

Just thinking out loud:

<table as |t|>
  {{#each header in headers}}
    <t.header name=header.name>    
      {{#each column in columns}}
         <t.column>{{column.name}}</t.column> 
      {{/each}}
    </t.header>
  {{/each}}
</table>

Here's some ideas on using this with charting:

<bar-chart as |bars, x-axis, y-axis, legend|>
  {{#each series as |data|}}
    <bars data />
  {{/each}}

  <x-axis>
    <text>{{tick}}</text>
    <line x1="" y1="" x2="" y2=""></line>
  </x-axis>

  <y-axis>
    <text>{{tick}}</text>
    <line x1="" y1="" x2="" y2=""></line>
  </y-axis>

  <g transform="translate(100, 100)">
    {{#each series as |data|}}
      <legend data />
    {{/each}}
  </g>
</bar-chart>

The problem with as |bars, x-axis, y-axis, legend| is that they're order dependent. If destructuring is available, that would solve this problem (among many others 😄 ).

@Lightblade's example, but with destructuring (and a component.js). Although destructuring is another concept and syntax, it does enable us to mitigate the position based refactoring hazard of the |. It does though, increase the scope and complexity. As with destructuring you almost certainly need renaming as { foo as bar }.

bar-chart.hbs

{{yield chartHelpers}}

bar-chart.js

export default Ember.Component.extend({
  chartHelpers() {
    return {
      bars: this.Bars.createWith({ chart: this }),
      'x-axis': this.XAxis.createWith({ chart: this }),
      'y-axis': this.YAxis.createWith({ chart: this }),
      legend: this.Legend.createWith({ chart: this })
    }
  }
});

<bar-chart as { bars, x-axis, y-axis, legend } >
  {{#each series as |data|}}
    <bars data />
  {{/each}}

  <x-axis>
    <text>{{tick}}</text>
    <line x1="" y1="" x2="" y2=""></line>
  </x-axis>

  <y-axis>
    <text>{{tick}}</text>
    <line x1="" y1="" x2="" y2=""></line>
  </y-axis>

  <g transform="translate(100, 100)">
    {{#each series as |data|}}
      <legend data />
    {{/each}}
  </g>
</bar-chart>

@stefanpenner is <bar-chart as { bars, x-axis, y-axis, legend } > style destructing valid syntax today?

<bar-chart as |graph| >
  {{#each series as |data|}}
    <graph.bars data />
  {{/each}}

  <graph.x-axis>
    <text>{{tick}}</text>
    <line x1="" y1="" x2="" y2=""></line>
  </graph.x-axis>

  <graph.y-axis>
    <text>{{tick}}</text>
    <line x1="" y1="" x2="" y2=""></line>
  </graph.y-axis>

  <g transform="translate(100, 100)">
    {{#each series as |data|}}
      <graph.legend data />
    {{/each}}
  </g>
</bar-chart>