我正在构建简单的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}}适用于类似的问题,但它不能提供几行代码的灵活性。
我的问题:是否有更合理的方式将模板插入模板?
谢谢。
答案 0 :(得分:-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。
答案 1 :(得分:-1)
是否有更合理的方法将模板插入模板?
这正是部分内容。您可以阅读有关部分模板here的更多信息。要点是您要使用以_
开头的文件名创建可重复使用的部分。例如:
{{! _header.hbs }}
<header>
<nav>...</nav>
</header>
然后,您可以使用{{partial 'header'}}
将该代码直接删除到另一个模板中(具有相同的上下文)。
话虽如此,在每个页面上都有一个标题通常是application template最有用的场景。您可以像这样定义应用程序模板:
{{! application.hbs }}
<header>
<nav>...</nav>
</header>
{{outlet}}
这将确保您的所有网页都有您想要的标题,因为每个顶级模板都会在插座内呈现。
如果您在确定要使用的内容时遇到问题,请在遇到问题之前使用部分内容。那时,您可能更有能力处理应用程序模板和复杂的模板结构。