How to programatically add component via controller action
ember.js
Solution
I think this example answers your question:
http://emberjs.jsbin.com/axUNIJE/1/edit
Problem
I have a scenario where I have list of items and each item has a create button. When I click on create, I wanted a component to be appended to the list item. This component uses model data as parameter and also accesses store from within. To access the store in the component I am using targetObject.store The component works well if I add it to the template manually like: ``` {{#each}} <div> blah blah {{my-component data=this.something action="doSomething"}} <button {{action 'add' this}}>Add</button></div> {{/each}} ``` I can probably show/hide the component using a flag, and toggle it when we click on Add button, but I rather do it dynamically if possible. I did try this but didn't work for me because I couldn't access store : ``` actions: { add: function(obj){ var view = Ember.View.create({ template: Ember.Handlebars.compile('{{my-component action="addQuestion"}}') }); view.set('data', obj.get('something')); Ember.run(function() { //prolly can get parent view rather than document.body view.appendTo(document.body); }); } } ``` Thanks.