each-in contextual components

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<ol>
	<li>Pass in a hash of components</li> 
	<li>Use each-in to iterate over hash to render each closure component</li>
	<li>Should this work?</li>
</ol>

<br>
<br>

This doesn't:
{{x-pluggable-each children=(hash 
		x-foo=(component "x-foo")
  	x-bar=(component "x-bar")
  	x-baz=(component "x-baz"))
}}

<hr>

This works fine as expected:
{{x-pluggable-string children=(hash 
		x-foo="x-foo"
  	x-bar="x-bar"
  	x-baz="x-baz")
}}

<hr>

This also works fine as expected:
{{x-pluggable-no-each children=(hash 
		x-foo=(component "x-foo")
  	x-bar=(component "x-bar")
  	x-baz=(component "x-baz"))
}}

templates.components.x-bar.hbs

Bar

templates.components.x-baz.hbs

Baz

templates.components.x-foo.hbs

Foo

templates.components.x-pluggable-each.hbs

{{#each-in children as |title x-child|}}
  <p>{{title}} - {{component x-child}}</p>
{{/each-in}}

templates.components.x-pluggable-no-each.hbs

{{children.x-foo}}
{{children.x-bar}}
{{children.x-baz}}

templates.components.x-pluggable-string.hbs

{{#each-in children as |title x-child|}}
  <p>{{title}} - {{component x-child}}</p>
{{/each-in}}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}