Question

当组件已动态添加到页面时，我在Ember（1.11.0）组件上遇到{{actions}}时遇到问题。奇怪的是，它似乎与ember应用程序添加到页面的方式有关 - 通过默认模板而不是添加到“rootElement”。

我的组件定义：

<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"已定义。

来自指南：

＆＃34; ... rootElement可以是DOM元素，也可以是与jQuery兼容的选择器字符串。请注意，附加到根元素外部的DOM的视图不会接收事件。如果指定自定义根元素，请确保只在其中附加视图！＆＃34; （来自Event delegation指南）

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

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

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

1 个答案: