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

Question

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

我有多页应用程序，每个应用程序都有不同的内容（组件），可以跨页面重复使用。对于一个简单的方法，让我们考虑这是一个类似于食谱博客的东西

主页：

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

单一配方页面：

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

产品/成分视图：

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

• 等等..

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

1. 评论
2. 产品参考指南
3. 流行食谱

我希望它们全部独立加载，并且我想将它们包含在不同的页面上，它们的位置将取决于页面类型。我想为每个组件设置独立的事件

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

1) 为我的每个组件使用不同的 Ember 应用程序：Example 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) 使用partials (partials 可以绑定到控制器并有loadNextPage 等动作吗？)Example 2

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

3) 使用命名网点Example 3

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

4)...？

或者 Ember 更适合单页应用程序？我不想使用 jquery ui 小部件，并且有绑定/取消绑定和 dom 操作混乱。

Answer 1

使用视图：

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

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

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

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

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

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