如何设置EmberJS组件的上下文

How to set the context of a EmberJS component?

本文关键字：EmberJS 组件上下文设置何设置更新时间：2023-09-26

我在这个页面上发现了https://github.com/emberjs/ember.js/issues/11043如何从组件继承。以下是示例：http://emberjs.jsbin.com/rwjblue/443/edit?html，css，js，输出

我玩了一些，尤其是动作，然后提出了这个问题：

如何设置组件的上下文？

考虑以下示例：

http://emberjs.jsbin.com/cofobanoca/edit?html，css，js，输出

及其衍生物

http://emberjs.jsbin.com/gipawemipe/1/edit?html，css，js，输出

它们几乎相同，只是在第二个链接中，组件是在操作内部动态创建的。

我的问题是，为什么第二个例子中的{{this}}是"生成的应用程序控制器"，而不是"App.XBarComponent"？

编辑：也许我不清楚。

我想要实现的是呈现一个包含输入字段的模态。这应该在应用程序模板内（使用出口）呈现为整个页面上的弹出窗口。Modal由两个组件构建，就像foo和bar一样。BaseModal（即Foo）和LoginModalContent（即Bar）是更好的名称。

单击OK（在BaseModal中定义），我想调用LoginModalContent的OK操作，以便能够使用this.get（'username'）.

获取表单的值（在LoginModal Content中定义）

除了在第二个环节中组件是在动作内部动态创建的。

在这里，您没有创建组件，只是渲染视图，如果您没有为视图指定控制器，Ember会为您创建一个控制器，这就是为什么{{this}}在第二个示例中是"生成的应用程序控制器"。

这也解释了为什么XBarComponent的操作处理程序在第二个示例中不起作用，因为视图缺少组件控制器。

如果你想用程序插入组件，组件助手是你的最佳选择，它会按名称渲染组件，同时让Ember处理视图/控制器/子组件管理。