我最近正在创建一个复杂布局的应用程序,所以我试图找到一种优雅的方式来使用大量的模板并让它们按照我的意愿工作。
首先,我有一些适合的UI组件,这些组件与模型没有关系,也不需要使用路由来管理状态,因此我使用{{render}}
helper来执行以下操作:
<script type="text/x-handlebars">
<div class="wrapper">
{{render component_1}}
{{render component_2}}
<div class="main">
{{outlet}}
</div>
</div>
</script>
这种方式有效,但老实说,在我做完这个之前,我对renderTemplate
方法一无所知。几天之后,我试着这样做:
<script type="text/x-handlebars">
<div class="wrapper">
{{outlet component_1}}
{{outlet component_2}}
<div class="main">
{{outlet main}}
</div>
</div>
</script>
并在路线中添加额外代码:
MyApp.ApplicationRoute = Ember.Route.extend({
renderTemplate: function() {
this.render();
this.render('component_1', {
outlet: 'component_1',
into: 'application'
});
this.render('component_2', {
outlet: 'component_2',
into: 'application'
});
}
});
然后我得到了相同的结果。
现在,我正在努力在这两种方法之间做出选择。我更喜欢第一个,因为我认为这些UI组件永远不会使用路由,因为它们没有任何状态,所以没有必要在ApplicationRoute
中编写额外的代码。但仍有两个问题:
{{render}}
。所以我需要一些解释和建议才能明智地使用{{render}}
和renderTemplate
,谢谢您的帮助。
答案 0 :(得分:1)
如果它们是组件,而不是完整的路线,只需在模板中使用渲染。
{{render}}在当前上下文中使用相同的命名控制器和模板。这意味着它会抓住当前路线的背景。如果存在具有相同名称的视图类,则它使用该视图类。如果指定了模型,它将成为该控制器的模型。默认目标将是同一个控制器。