关于部分的几个词

Question

我有几个不相关的页面使用布局A，另一组不相关的页面使用布局B.这很简单，但我无法弄清楚如何在Ember中以干的方式执行此操作。

我知道模板嵌套等同于路由嵌套，但我不想嵌套路由，因为它意味着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 Assertion Failed: You attempted to render into 'layoutA' but it was not found

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

DEPRECATION: Rendering into a {{render}} helper that resolves to an {{outlet}} is deprecated. [deprecation id: ember-routing.top-level-render-helper] See http://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet for more details.

以下是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代码：

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

这些功能足以减少重复代码的数量。您可能无法将重复的代码减少到零，但在我看来，这并不重要。只需移动您可以使用的部分/组件，您的模板就足够清晰了。如果要模拟继承，请将该技巧与组件和产量一起使用。

更新

关于部分的几个词

如果你google“ember component vs partial”，你可以在SO上看到一些博客帖子和答案，其中ppl说“不要使用partials”。在许多情况下，没有解释原因。我找到的要点是：

组件更加孤立，分离且可测试。我同意这一点。
以后可能会弃用和删除部分内容。然而，这在2015年首次出现，但此时此刻仍有部分内容尚未弃用。

当我建议使用偏见时？

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

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

没有必要重复使用这样的局部，我们只想打破模板以便于维护。例如，让3步的每一步都在它自己的.hbs文件中形成，而不是拥有一个大模板。
如果不推荐使用partials，则可以轻松将这些部分移回一个大模板。

Answer 2

听起来我的解决方案就是使用Ember组件。 Ember组件有自己的模板，可以使用{{name_of_component}}嵌套到路径的模板中，但使用组件不会影响路由。

也许我误解了你的需要，但在我看来，这就是容易解决的问题。阅读它here。如果我误解了这个问题，请澄清！

Answer 3

我想要达到的目的与使用命名出口类似，因此我可以将一些内容输出到特定的地方。但是，似乎Ember的推荐方法是使用ember-elsewhere。

documentation说：

在将指定的插座引入Ember之前，渲染助手用于在路线中为this.render声明插槽。这种用法在现代惯用语应用程序中并不常见，因此不推荐使用。 一般情况下，不建议使用命名出口或命名渲染助手的模式。而是使用 ember-others 或其他DOM重定向库应该更好地为这些用例提供服务。

我发现这个附加组件更容易理解部分和组件。

由于Handlebars没有模板继承功能，因此或使用partials / components可能是最好的。

或者，我应该改变我创建应用程序的方式，并使用路由进行模板嵌套。这可能是Ember的方式。

Ember中的模板继承

3 个答案:

更新

关于部分的几个词

当我建议使用偏见时？

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