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

Question

当组件被动态添加到页面时，Ember (1.11.0) 组件上的 {{actions}} 出现问题。奇怪的是，它似乎与 ember 应用程序如何添加到页面有关 - 通过默认模板与添加到“rootElement”。

工作 JSBin：actions are triggered

非工作 JSBin：actions aren't triggered

我的组件定义：

<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 的视图将不会接收事件。如果您指定自定义根元素，请确保您只在其中附加视图！” （来自Event delegation指南）

"...在渲染过程结束时，根视图向 RenderBuffer 请求其元素。RenderBuffer 获取其完成的字符串并使用 jQuery 将其转换为元素。视图将该元素分配给其元素属性并将其放置在 DOM 中的正确位置（在 appendTo 或应用程序的根元素中指定的位置，如果应用程序使用了 append）。" （来自UnderstandingEmber: The view Layer指南）。

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