ember.js - How to programatically add component via controller action

Question

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.

Answer 1

I think this example answers your question:

http://emberjs.jsbin.com/axUNIJE/1/edit