我最近正在创建一个布局复杂的应用程序,所以我试图找到一种优雅的方式来使用大量模板并让它们按我的意愿工作。
首先,我有一些 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
感谢您的帮助。