小编Cla*_*cle的帖子

当组件已动态添加到页面时,我在Ember(1.11.0)组件上遇到{{actions}}时遇到问题.奇怪的是,它似乎与ember应用程序如何添加到页面有关 - 通过默认模板与添加到"rootElement".

工作JSBin:触发操作

非工作JSBin:不触发操作

我的组件定义:

<script type="text/x-handlebars" data-template-name="components/foo-bar">
    <p>Component {{name}}</p>
    <button {{action "doIt"}}>Do It</button>  
</script>

App.FooBarComponent = Ember.Component.extend({
    click: function() {
        console.log('click fired! - ' + this.get('name'));
    },
    actions: {
        doIt: function() {
            console.log('doIt fired! - ' + this.get('name'));
        } 
    }
});

将组件动态添加到页面时,不会触发click()事件和doIt()操作.我正在使用append()方法将组件添加到页面:

App.IndexController = Ember.Controller.extend({
    count : 1,
    actions: {
        createNewFoobBar: function() {
            this.set('count', this.get('count') + 1);
            var comp = this.container.lookup('component:foo-bar');
            comp.set('name', this.get('count'));
            comp.set('controller', this);
            comp.append();
        }
    }
});

在任何一种情况下,当组件是模板的一部分时,都会正确触发操作:

{{foo-bar name="one"}}