Question

我正在构建简单的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}}适用于类似的问题，但它不能提供几行代码的灵活性。

我的问题：是否有更合理的方式将模板插入模板？

谢谢。

Answer 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/

Answer 2

是否有更合理的方法将模板插入模板？

这正是部分内容。您可以阅读有关部分模板here的更多信息。要点是您要使用以_开头的文件名创建可重复使用的部分。例如：

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

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

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

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

{{outlet}}

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

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

Ember js链接模板包括

2 个答案: