Ember js 链接模板包括答案

【问题标题】：Ember js link templates includesEmber js 链接模板包括
【发布时间】：2015-09-14 16:53:36
【问题描述】：

我正在构建简单的 Ember js 模板链接，由于我对 Ember 有点陌生，而且我来自 PHP 背景，我尝试从 PHP 经验中构建想法，将 ember 模板包含在另一个模板中，例如：

<script type="text/x-handlebars" id="top-nav">HTML HEADER</script>
<script type="text/x-handlebars" id="index">{{render 'top-nav'}} HTML body</script>

它背后的想法是我希望“top-nav”模板包含在每个 ember 模板中。我知道 {{outlet}} 在类似的事情上也可以工作，但它不会提供只有几行代码的灵活性。

我的问题：有没有更合理的方式将模板插入到模板中？

谢谢。

【问题讨论】：

“但它不会提供只有几行代码的灵活性”。怎么会比写 {{outlet}} 更短？你能澄清一下你的担忧吗？

标签： javascript templates ember.js

【解决方案1】：

在另一个模板中插入模板的最佳方法是使用视图。

{{view 'top-nav'}}

像这样定义你的模板：

<script type="text/x-handlebars" data-template-name="top-nav">
... template markup
</script>

然后在js中定义你的视图

Ember.View.extend({
  templateName: 'top-nav',
});

就是这样。你可以在这里找到更多文档：http://guides.emberjs.com/v1.10.0/views/inserting-views-in-templates/

编辑

正如@GJK 指出的，如果您使用 Ember 1.13 或更高版本，从 Ember 1.13 开始不推荐使用视图，我建议您改用组件。

{{top-nav}}

组件的工作方式与视图过去的工作方式相似。您可以在此处找到有关它们的更多信息。最终这取决于您使用的是什么版本的 Ember。

http://guides.emberjs.com/v2.0.0/components/

【讨论】：

请注意，视图在 Ember 1.13 中已被弃用，并在 Ember 2.0 中完全删除（有一个兼容性插件，但不适合长期使用）。

【解决方案2】：

有没有更合理的方式将模板插入到模板中？

这正是 partials 的用途。你可以阅读更多关于部分模板here。要点是您要使用以_ 开头的文件名创建可重复使用的部分。例如：

{{! _header.hbs }}
<header>
    <nav>...</nav>
</header>

然后，您可以使用{{partial 'header'}} 将该代码直接放入另一个模板（具有相同的上下文）。

话虽如此，在每个页面上都有一个标题通常是application template 最有用的场景。您可以像这样定义您的应用程序模板：

{{! application.hbs }}
<header>
    <nav>...</nav>
</header>

{{outlet}}

这将确保您的所有页面都有您想要的标题，因为每个顶级模板都将在插座内呈现。

如果您在决定使用什么时遇到问题，请使用部分内容，直到遇到问题。到那时，您可能更有能力处理应用程序模板和复杂的模板结构。

【讨论】：