英文原文：http://emberjs.com/guides/views/inserting-views-in-templates/

到目前为止，我们已经讨论了如何为单独的视图编写模板。然而，随着应用开发的深入，为了封装页面上的不同区域，你可能会经常需要创建一个层次化的视图结构。每个视图负责处理事件和维护需要显示的属性。

{{view}}

为了将一个子视图添加到父视图中，可以使用{{view}}助手，它接受一个视图类的路径参数。

  1. // 定义父视图
  2. App.UserView = Ember.View.extend({
  3.   templateName: 'user',
  5.   firstName: "Albert",
  6.   lastName: "Hofmann"
  7. });
  9. // 定义子视图
  10. App.InfoView = Ember.View.extend({
  11.   templateName: 'info',
  13.   posts: 25,
  14.   hobbies: "Riding bicycles"
  15. });
  1. <script type="text/x-handlebars" data-template-name="user">
  2.   User: {{view.firstName}} {{view.lastName}}
  3.   {{view App.InfoView}}
  4. </script>
  1. <script type="text/x-handlebars" data-template-name="info">
  2.   <b>Posts:</b> {{view.posts}}
  3.   <br>
  4.   <b>Hobbies:</b> {{view.hobbies}}
  5. </script>

如果我们想要创建一个App.UserView的实例并渲染它，我们就会得到如下的DOM:

  1. User: Albert Hofmann
  2. <div>
  3.   <b>Posts:</b> 25
  4.   <br>
  5.   <b>Hobbies:</b> Riding bicycles
  6. </div>

相对路径

你可以使用一个子视图与其父视图之间的相对路径，而不使用绝对路径。例如，我们可以像这样嵌套上面的视图层次结构：

  1. App.UserView = Ember.View.extend({
  2.   templateName: 'user',
  4.   firstName: "Albert",
  5.   lastName: "Hofmann",
  7.   infoView: Ember.View.extend({
  8.     templateName: 'info',
  10.     posts: 25,
  11.     hobbies: "Riding bicycles"
  12.   })
  13. });
  1. User: {{view.firstName}} {{view.lastName}}
  2. {{view view.infoView}}

当以这种形式组织视图类时，要确保属性名称首字母小写，因为Ember会把以大写字母开头的属性解释为全局属性。

设置子视图模板

如果你想在主模板中声明子视图类所使用的模板的话，可以使用{{view}}助手的区块形式。我们可以将上面的例子改写如下：

  1. App.UserView = Ember.View.extend({
  2.   templateName: 'user',
  4.   firstName: "Albert",
  5.   lastName: "Hofmann"
  6. });
  8. App.InfoView = Ember.View.extend({
  9.   posts: 25,
  10.   hobbies: "Riding bicycles"
  11. });
  1. User: {{view.firstName}} {{view.lastName}}
  2. {{#view App.InfoView}}
  3.   <b>Posts:</b> {{view.posts}}
  4.   <br>
  5.   <b>Hobbies:</b> {{view.hobbies}}
  6. {{/view}}

当你这么做的时候，把它想象成视图对应着页面上的一部分，这样会更容易理解。同时，这允许你对这一部分页面的事件处理逻辑进行封装。