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

【问题标题】：How to set the context of a EmberJS component?如何设置 EmberJS 组件的上下文？
【发布时间】：2016-08-29 23:56:30
【问题描述】：

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

如何设置组件的上下文？

考虑以下示例：

及其派生词

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

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

编辑： 可能我不是很清楚。

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

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

【问题讨论】：

“上下文”到底是什么意思？
我的意思是模板内的{{this}}
this 是驱动模板的对象。例如，对于与路由关联的顶级模板，它将是控制器。对于与组件关联的模板，它将是组件。不是你自己设置的。
所以实际上在App.ApplicationRoute 中使用this.render 定义了上下文。这是一种在不覆盖上下文的情况下从 JavaScript 渲染组件的方法吗？

【解决方案1】：

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

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

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

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

【讨论】：