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 手动创建它们，它们将起作用。所以而不是:

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 helper 旨在在 Ember.Router 托管 View 的上下文中使用。当您调用 {{render "child"}} ember 尝试为子模板找到合适的 Controller 类。

What if I really want to use the appendTo method?

好的，但不能使用 render helper 。其他选项:

{{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/