如何设置EmberJS组件的上下文？

Question

我在这个页面上找到了https://github.com/emberjs/ember.js/issues/11043如何从组件继承的一个很好的例子。以下是示例：http://emberjs.jsbin.com/rwjblue/443/edit?html,css,js,output

我玩了一些，尤其是行动，并提出这个问题：

如何设置组件的上下文？

请考虑以下示例：

http://emberjs.jsbin.com/cofobanoca/edit?html,css,js,output

及其衍生物

http://emberjs.jsbin.com/gipawemipe/1/edit?html,css,js,output

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

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

修改 也许我不清楚。

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

单击OK（在BaseModal中定义），我想调用LoginModalContent的OK操作，以便能够使用例如以下方式获取表单的值（在LoginModalContent中定义）。 this.get（ '用户名'）。

Answer 1

  

除了在第二个链接中，它们几乎相同   组件在动作中动态创建。

你没有创建一个组件，只是渲染视图，如果你没有为视图指定一个控制器，Ember会为你创建一个，那个＆＃39;为什么{{this}}是＆＃34;生成的应用程序控制器＆＃34;在第二个例子中。

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

如果您想以编程方式插入组件，component helper是最好的选择，它会按照名称呈现组件，同时让Ember处理视图/控制器/子组件管理。