ember.js - Emberjs - 无法使用appendTo和{{render}}助手渲染嵌套 View

Question

我正在通过使用appendTo方法和{{render}}帮助器在嵌套 View 场景中尝试一个简单的事件处理机制，并且在加载时抛出“无法调用null的方法查找”错误

JSFiddle 相同 - Simple nested view event handling

还有一个观察结果是，如果我在应用程序模板中编写 {{render 'parent'}} 并从 java 脚本中删除父级的创建，一切都会正常工作，有什么想法吗？

Answer 1

如何修复:

您的 View 或模板似乎没有任何问题。如果您使用 Ember 路由器来管理 View 而不是通过appendTo 手动创建 View ，它们将会起作用。所以代替:

var view = App.ParentView.create({ controller: App.ParentController.create() });
view.appendTo('#dvViewRender'); 

使用路由器:

App.Router.map(function() {
  this.route("parent", { path: "/" });
});

并定义应用程序模板:

<script type="text/x-handlebars">{{outlet}}</script>

Prove it!

在这里工作 fiddle :http://jsfiddle.net/mgrassotti/vQpe6/1/

Why does that work?

render 帮助器设计为在 Ember.Router 托管 View 的上下文中使用。当您调用 {{render "child"}} ember 尝试为子模板找到合适的 Controller 类。

What if I really want to use the appendTo method?

好的，但无法使用 render 帮助器。其他选项:

• {{partial 'child'}} 将插入子模板，但不会将其连接到 ChildView 或 ChildController

• 使用 View 助手，它将插入 App.ChildView 并在 ParentController 的上下文中渲染其模板

• 使用 socket ，然后使用 App.ChildController 的实例手动将其连接到 App.ChildView

* 更新(基于评论)*

Due to this dynamic and independent nature I can't embed the whole page layout and the widgets in one application template So any suggestions for using Ember in this kind of scenarios??

每个小部件都可以是一个单独的 ember 应用程序。每个仍然有一个路由器来管理其状态，但通过设置 history: none 该路由器将不会连接到浏览器的 URL。例如:

var Widget2App = Ember.Application.create({
  rootElement: '#widget2',
  history: 'none',
  ApplicationView: Ember.View.extend({
    templateName: 'widget2',
  }),
  ParentView: Ember.View.extend({
    templateName: 'parent2',

更新的示例在一页中显示 2 个 ember 应用程序:http://jsfiddle.net/mgrassotti/L6aVB/