Emberjs - 无法使用appendTo和{{render}}帮助器呈现嵌套视图

时间:2013-01-22 04:34:10

标签: ember.js

我正在使用appendTo方法&amp ;;在嵌套视图场景中尝试一个简单的事件处理机制。 {{render}}帮助器并在加载

时抛出'无法调用方法查找空'错误

同样的JSFiddle - Simple nested view event handling

还有一个观察结果是,如果我在应用程序模板中编写{{render 'parent'}}并从java脚本中删除父项的创建,那么一切正常吗??

1 个答案:

答案 0 :(得分:4)

如何解决:

您的观看次数或模板似乎没有任何问题。如果您使用Ember路由器管理视图而不是通过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>
  

证明它!

在这里工作小提琴:http://jsfiddle.net/mgrassotti/vQpe6/1/

  

为什么这样做?

render帮助程序旨在在Ember.Router管理视图的上下文中使用。当您调用{{render "child"}}时,ember尝试为子模板查找适当的控制器类。

  

如果我真的想使用appendTo方法怎么办?

好的,但不能使用render帮助器。其他选择:

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

  • 使用视图助手,它将插入App.ChildView并在ParentController的上下文中呈现它的模板

  • 使用插座,然后使用App.ChildController实例手动将其连接到App.ChildView

*更新(基于评论)*

  

由于这种动态和独立的性质,我不能将整个页面布局和小部件嵌入到一个应用程序模板中所以在这种情况下使用Ember的任何建议都是什么?

每个小部件都可以是一个单独的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/