Following Ember guides, trying to add Component into ViewContainer, getting error

I am following the instructions in the official Ember Guides, on how to dynamically add components or views to the DOM, but I can’t get the example to work.

See this JSFiddle

You will have to define a controller array property e.g.

listComponents: []

and push the newly created components onto this property


Define a property

components: function() { return this.get('listComponents'); ) {}.property('listComponents')

And finally in the template you can iterate over the components like this:

{{#each component in components}}

Something like that should work.

Thanks, Kgish. In my case, I want to dynamically (i.e., with just JavaScript, no each template helper) add a single component to the DOM.

I just want to add a component to the page, similar to what jQuery’s append allows: $("#someDiv).append(myComponent). How can I do this in Ember?

I’m guessing there is a straightforward way to do something this trivial.

Does this StackOverflow question help?

Especially here: JS Bin - Collaborative JavaScript Debugging