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

Question

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

我有多页应用程序，并且在每个页面上我都有不同的内容（组件），可以跨页面重用。 对于一个简单的方法，让我们考虑一下这就像Recipe Blog

主页：

• 食谱（通过Ember加载）
• 热门食谱块（通过Ember加载）
• 产品参考指南块（通过Ember加载）

单一食谱页面：

• 配方内容（后端呈现的简单html）
• 评论块（通过Ember加载）
• 产品参考指南块（通过Ember加载）

产品/成分视图：

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

• 等等..

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

1. 评论
2. 产品参考指南
3. 热门食谱

我希望它们全部独立加载，并且希望将它们包括在不同的页面中，并且它们的位置将取决于页面类型。 我希望每个组件都有独立的事件

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

1）对我的每个组件使用不同的Ember应用程序： 示例1

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

2）使用局部函数（可以将局部函数绑定到控制器并执行诸如loadNextPage等操作） 示例2

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

3）使用命名插座示例3

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

4）...？

也许Ember更适合单页应用程序？ 我不想使用jquery ui小部件，并具有绑定/取消绑定和dom操作混乱的功能。

Answer 1

使用视图：

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

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

当您要创建可重复使用的组件时

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

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

有关更多信息，请阅读： http : //emberjs.com/guides/views/