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

1

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

2

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

listComponents: []

and push the newly created components onto this property

this.get('listComponents').pushObject(theContainer);

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}}
  {{component}}
{{/each}}

Something like that should work.

3

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.

4

Does this StackOverflow question help?

5

Especially here: JS Bin - Collaborative JavaScript Debugging