尝试在 emberjs 中渲染两个模板视图时，只有后一个会渲染答案

【问题标题】：While trying to render two template views in emberjs only the later one renders尝试在 emberjs 中渲染两个模板视图时，只有后一个会渲染
【发布时间】：2012-12-23 03:58:38
【问题描述】：

我是 emberjs 的新手，我试图在标记中使用两个不同的脚本标签来渲染两个视图，但只有后一个会被渲染。

HTML：

<script type="text/x-handlebars">
  {{view Ember.Select
         contentBinding="App.peopleController"
         selectionBinding="App.selectedPersonController.person"
         optionLabelPath="content.fullName"
         optionValuePath="content.id"}}

  <p>Selected: {{App.selectedPersonController.person.fullName}}
    (ID: {{App.selectedPersonController.person.id}})</p>
</script>
<script type="text/x-handlebars">
  {{#view Ember.Checkbox}}
    Check me!
  {{/view}}
</script>

我在这里也为此创建了小提琴：jsfiddle

在这种情况下，我只能看到复选框，但看不到下拉选择视图。

【问题讨论】：

标签： ember.js handlebars.js

【解决方案1】：

您必须为模板命名，没有名称的模板被视为 ApplicationView 的模板，我猜如果您有多个没有名称的模板，ember 会选择最后一个。所以你必须这样做：

<script type="text/x-handlebars" data-template-name="check-box">
   {{#view Ember.Checkbox}}
     Check me!
   {{/view}}
</script>

这是一个示例http://jsfiddle.net/zgLCr/419/ - 将 Ember.Checkbox 包装在另一个视图中没有多大意义，但它显示了如何命名和呈现视图，尽管您可以将复选框放在 ApplicationView 的模板中：

<script type="text/x-handlebars">
   {{view Ember.Select
     contentBinding="App.peopleController"
     selectionBinding="App.selectedPersonController.person"
     optionLabelPath="content.fullName"
     optionValuePath="content.id"}}

   <p>Selected: {{App.selectedPersonController.person.fullName}}
      (ID: {{App.selectedPersonController.person.id}})</p>

   {{#view Ember.Checkbox}}
      Check me!
   {{/view}}
</script>

【讨论】：

谢谢，但我希望它们在不同的视图中，因为我想创建一个带有页眉、内容和页脚的小部件。所有人都有不同的看法，例如jsfiddle for widget。我必须将它们全部添加到应用程序视图中吗？因为这样标记就不会那么可读了。我有办法解决这个问题吗？
这完全取决于您的应用程序 - 如果您的页眉、内容和页脚就像小部件，也就是说，它们除了显示静态内容并拥有自己的控制器之外还做一些事情，那么拆分可能是个好主意他们起来。顺便说一句，我建议阅读此 trek.github.com 或查看使用 ember github.com/addyosmani/todomvc/tree/gh-pages/… 编写的简单 todo 类应用程序的代码，以了解路由器和插座以及如何根据应用程序的状态连接视图。