Component layout not rendered in ContainerView - ember.js

Question

I'm having trouble adding a Component dynamically to a ContainerView. See this jsfiddle:
http://jsfiddle.net/theazureshadow/7n2hz/
The component root element is placed in the container, but the layout associated with the component is not rendered.
App = Ember.Application.create({});
App.IndexRoute = Ember.Route.extend({});
App.IndexView = Ember.View.extend({
didInsertElement: function() {
console.log('IndexView inserted');
var container = this.get('container');
container.pushObject(Ember.TextField.create());
container.pushObject(App.MyComponent.create());
}
});
App.MyContainer = Ember.ContainerView.extend({
didInsertElement: function() {
console.log('MyContainer inserted');
}
});
App.MyComponent = Ember.Component.extend({
classNames: ['my-component'],
//template: Ember.Handlebars.compile('<p>Compiled directly</p>'),
didInsertElement: function() {
console.log('MyComponent inserted');
}
});
If I uncomment the template property, it does render that content properly. I also insert the component directly into the index view, where it renders properly (though the classNames are not added in this case).
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Render component directly:</h2>
{{my-component}}
<hr/>
<h2>Add component to container:</h2>
{{view App.MyContainer viewName="container"}}
</script>
<script type="text/x-handlebars" data-template-name="components/my-component">
<b>My component</b>
</script>
I've tried messing around with Ember.run, but no luck so far. Is didInsertElement the wrong hook for pushObject?

Answer 1

That should fix your problem. See the layoutName property.
App.MyComponent = Ember.Component.extend({
classNames: ['my-component'],
layoutName: 'components/my-component',
didInsertElement: function() {
console.log('MyComponent inserted');
}
});