如何通过控制器动作以编程方式添加组件 [英] How to programatically add component via controller action

问题描述

我有一个场景，我有项目列表，每个项目都有一个创建按钮.当我单击创建时，我希望将一个组件附加到列表项.该组件使用模型数据作为参数，并从内部访问存储.要访问组件中的商店，我正在使用 targetObject.store

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);
        });

    }
}

谢谢.

推荐答案

我认为这个例子可以回答你的问题:

I think this example answers your question:

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

这篇关于如何通过控制器动作以编程方式添加组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！