javascript - 如何设置 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}} 是“生成的应用程序 Controller ”而不是“App.XBarComponent”？

编辑: 可能是我没说清楚。

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

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

Answer 1

They are pretty much the same except that in the second link, the component is dynamically create inside an action.

您并不是在创建一个组件，只是渲染一个 View ，如果您没有为 View 指定 Controller ，Ember 会为您创建一个 Controller ，这就是为什么 {{this }} 是第二个示例中的“生成的应用程序 Controller ”。

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

如果您想以编程方式插入组件 component helper是你最好的选择，它按名称渲染组件，同时让 Ember 处理 View / Controller /子组件管理。