【问题标题】: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}}

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-07-28
    • 2013-03-29
    • 1970-01-01
    • 2015-06-03
    • 1970-01-01
    • 1970-01-01
    • 2010-10-25
    相关资源
    最近更新 更多