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

Question

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

我有多页面应用程序，每个应用程序都有不同的内容（组件）可以跨页面重用。对于一种简单的方法，我们可以考虑使用Recipe博客

主页：

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

Single Recipe页面：

• 食谱内容（后端呈现的简单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（可以部分绑定到控制器并执行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/