Javascript Ember.js-同一页面上有多个视图

刚刚开始学习Ember.js，并评估它是否适合我的项目

我有多页应用程序，在每个页面上我都有不同的内容（组件），可以跨页面重用。对于一个简单化的方法，让我们来考虑一下，这是一个类似于配方博客

的东西。 主页：

• 配方（通过余烬加载）
• 流行食谱块（通过余烬加载）
• 产品参考导向块（通过Ember加载）

单一配方页：

• 配方内容（由后端呈现的简单html）
• 注释块（通过余烬加载）
• 产品参考导向块（通过Ember加载）

产品/成分视图：

• 产品内容（后端呈现的简单html）
  评论块（通过余烬加载）
  产品参考导向块（通过Ember加载）

• 等等

所以基本上我有小的可重用组件

评论

产品参考指南

流行食谱

我希望它们都是独立加载的，我希望将它们包含在不同的页面上，它们的位置将取决于页面类型。我希望每个组件都有独立的事件

跳过文档，我认为有两种解决方案：

1） 对我的每个组件使用不同的余烬应用程序：

3） 使用指定的出口

4）

或者也许余烬更适合单页应用程序？我不想使用jquery ui小部件，而是让绑定/取消绑定和dom操作一团糟。

使用视图：

在Ember.js中创建视图通常仅出于以下原因：

当您需要复杂地处理用户事件时

当您想要创建一个可重用的组件时

为每个可重用组件创建一个视图，并在需要时将其绑定到正确的模板

让Ember为您处理视图和上下文的生命周期

有关更多信息，请阅读：

<script type="text/x-handlebars" data-template-name='app1-view'>
I am the App1 main view
</script>
<script type="text/x-handlebars" data-template-name='app2-view'>
I am the App2 main view
</script>

{{partial 'navbar'}}
{{outlet}}   
{{partial 'footer'}}

{{outlet header}}
{{outlet body}}
{{outlet navBar}}