Ember:动态创建组件动作don'不要开火

Ember: Dynamically created component actions don't fire

本文关键字：开火 don 动态 创建 创建组 组件 Ember      更新时间：2023-09-26

当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"}}

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

  • 使用CCD_ 1代替CCD_
  • 删除comp.set('controller', this);，否则将引发错误

工作jsbin：http://emberjs.jsbin.com/saquzupaye/edit?html，js，控制台，输出

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

来自指南：

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

"…在呈现过程结束时，根视图向RenderBuffer请求其元素。RenderBuffer获取其完整的字符串，并使用jQuery将其转换为元素。该视图将该元素分配给其元素属性，并将其放置在DOM中的正确位置（在appendTo中指定的位置，如果应用程序使用append，则为应用程序的根元素）。"（摘自UnderstandingEmber:视图图层指南）。

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

相关文章：