Ember:动态创建的组件操作不会触发

Question

当组件已动态添加到页面时,我在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"}}

Answer 1

我发现它在以下情况下有效：

• comp.appendTo('#content')被用来代替comp.append()，
• comp.set('controller', this);被删除，否则会抛出错误。

工作 jsbin：http://emberjs.jsbin.com/saquzupaye/edit ?html,js,console,output

为什么comp.append()不工作？我们可以看到组件被附加到body而不是#content，并且这种行为看起来像是意外的，因为rootElement: "#content"已定义。

来自指南：

“...rootElement 可以是 DOM 元素或 jQuery 兼容的选择器字符串。请注意，附加到根元素之外的 DOM 的视图将不会接收事件。如果指定自定义根元素，请确保仅附加视图在里面！” （摘自活动委托指南）

“...在渲染过程结束时，根视图向 RenderBuffer 询问其元素。RenderBuffer 获取其完整的字符串并使用 jQuery 将其转换为元素。视图将该元素分配给其 element 属性并将其放置到 DOM 中的正确位置（appendTo 中指定的位置或应用程序的根元素（如果应用程序使用了append）。” （来自UnderstandingEmber：视图层指南）。

所以我认为这是错误，解决方法是使用 手动附加到根元素appendTo()。