javascript - 第二个 ember 模板阻止第一个模板显示

Question

我使用 ember，主要是为了方便客户端模板化。

当我有多个 <code><script type="text/x-handlebars"</code>> 时，我遇到了麻烦页面中的标签。它最终只显示最后一个模板。所以如果我从

开始

<script type="text/x-handlebars">
    <h1> My name is {{name}} </h1> 
    <h2> My favorite color is {{color}} </h2>
</script>

它显示完整的消息。但如果我把它变成

<script type="text/x-handlebars">
    <h1> My name is {{name}} </h1> 
</script>
<p> This is some static content </p>
<script type="text/x-handlebars">
    <h2> My favorite color is {{color}} </h2>
</script>

它只显示最喜欢的颜色线。

我正在尝试复制示例中的类似行为 http://emberjs.com/examples/contacts/ ，但他们似乎没有执行多个未命名脚本的问题。

有人知道我需要做什么才能完成这项工作吗？

Answer 1

这些例子已经过时了。如果您尝试使用最新版本的 ember 来跟随他们，很多事情都将不起作用。

针对您的问题，ember 将使用最后一个未命名的模板作为您的应用程序模板，但您需要命名其他模板。因此，对于上面的示例，添加一个 data-template-name 属性:

<script type="text/x-handlebars" data-template-name="color">
  <h2> My favorite color is {{color}} </h2>
</script>

完成此操作后，em​​ber 将使用剩余的模板作为“应用程序”模板。现在您需要修改该模板以将“颜色”模板插入到适当的位置。有很多方法可以实现这一点 - 这里我使用 partial 帮助器:

<script type="text/x-handlebars">
  <h1> My name is {{name}} </h1> 
  {{partial "color"}}
</script>

这是一个工作示例:http://jsbin.com/uzeyum/2/edit

希望这可以帮助您入门。由于这些示例已经过时，我建议您阅读 ember guides !与最新版本保持同步。