ember.js - Ember 中的模板继承

Question

我有几个使用布局 A 的不相关页面，以及另一组使用布局 B 的不相关页面。就这么简单，但我不知道如何在 Ember 中以 DRY 方式执行此操作。

我知道模板嵌套等同于路由嵌套，但我不想嵌套路由，因为这意味着 URL 也将被嵌套。我只想嵌套模板，因为页面不相关。

我想实现的本质上是模板继承。

我原以为这会起作用，但 Ember 抛出了一个错误。

// app/routes/samePage.js
import Ember from 'ember';

export default Ember.Route.extend({
    renderTemplate(){
        this.render('somePage', {
            into: 'layoutA'
        });
    }
});

这是我得到的错误:

ember.debug.js:18015 断言失败:您试图渲染到“layoutA”但未找到

我也收到了这个警告。它告诉我阅读 this link ，但我认为这对我没有帮助。

弃用:渲染到解析为 {{outlet}} 的 {{render}} 助手已弃用。 [弃用 ID:ember-routing.top-level-render-helper] 请参阅 http://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-了解更多详情。

这是 layoutA.hbs 的样子。我知道您不能在同一个模板中多次使用 {{outlet}}，但您可能会得到我想要实现的目标。

<div class="header">
    {{outlet}}
</div>
<div class="content">
    {{outlet}}
</div>
<div class="footer">
    {{outlet}}
</div>

我如何在 Ember 中执行此操作？这听起来像是一项需要更加明确的基本任务。我是否需要自己实现一个模板继承助手(如 here 所示)？或者，也许已经有一个 Ember 附加组件？

Answer 1

不幸的是，在 Ember 中没有模板继承这样的东西。但是有两个特性允许重用 html 代码:

1. Components是 Ember 的众所周知的功能。它允许有一个可重复使用的模板和/或 js 代码来控制这种模板的外观和行为。组件有它自己的上下文，所以所有数据都应该通过属性传递给它。我建议将组件用于自定义 ui 元素，或者当您需要使用某些逻辑重用模板的一部分时(例如，可以将依赖于身份验证的带有用户菜单的顶部导航移动到组件)。 There is also a trick允许使用多个 {{yield}} 模拟组件的模板继承。也许这就是您想要的。
2. Partials似乎鲜为人知(它们甚至没有在 2.x 的官方指南中提及)但非常有用。此助手 ({{partial}}) 在当前上下文中呈现任何模板。我建议您在需要将大模板拆分成多个部分时使用它。

这些特性足以减少大量的重复代码。您可能无法使用它们将重复代码减少到零，但我认为这并不重要。只需将你能移动的部分移动到部分/组件，你的模板就会足够清晰。如果您想模拟继承，请对组件和 yield 使用该技巧。

更新

关于偏音的几句话

如果你用谷歌搜索“ember component vs partial”，你可以看到一些关于 SO 的博客文章和答案，其中 ppl 说“不要使用 partials”。在许多情况下没有解释原因。我发现的要点是:

• 组件更加独立、解耦和可测试。我同意这一点。
• Partials 将来可能会被弃用和删除。然而，这是在 2015 年首次提出的，但目前部分内容仍然存在并且没有被弃用。

什么时候建议使用 partials？

当你有一个难以维护的大模板并且你不能将路由分成几部分时。如果您使用一些 css 框架(如 bootstrap 或 semantic-ui)并且需要实现几个大的 3-4 步表单，或者添加几个模式或显示一些复杂的实体，就会发生这种情况。在这种情况下使用组件是不必要的(您不会在任何其他页面上使用它们)并且它们的隔离会增加麻烦(您需要传递需要显示为属性的数据并添加一些操作以获取用户输入以防万一形式)。

为什么我建议在这种情况下使用 partials？

• 没有必要重用这样的部分，我们只是想打破模板以便于维护。例如，将 3 步表单中的每一步都放在自己的 .hbs 文件中，而不是使用一个大模板。
• 如果部分内容将被弃用，则很容易将这些部分移回一个大模板。