一般来说,大多数模板语言都提供了一些方法来将页面的target 内容包装到主布局中。这允许将公共页面布局分离到另一个文件中,并将较小的目标模板放在不同的文件中。
在 Ember 中对此进行了几次迭代,目前此功能由 {{outlet}} 助手提供。奥特莱斯是 Ember 将yield 放入布局的方式。
outlet 与yield 明显不同的区域是嵌套。在服务器端生成要简单得多。您只需要标记要让出的模板区域,然后调用以将内容块生成到该指定目标。
但是,当内容的呈现切换到客户端 JavaScript 时,只有部分页面会按需更新。您不能再简单地将yield 直接放入标记中。你需要一个更聪明的yield 即:- outlet。
{{outlet}} 有两个方面。
- 一个标记,指示您要在哪里产生。这是
{{outlet}} 助手。
- 将模板呈现到此插座的代码。这是
renderTemplate 钩子内部使用的render 方法。
默认情况下,{{outlet}} 不需要名称。这使它成为该模板的默认出口。一个模板中可以有很多这样的出口,它们可以通过给它一个名字来指定。例如:-
{{outlet 'sidebar'}}
{{outlet 'nav'}}
这声明了 2 个名为“sidebar”和“nav”的网点。您现在可以将其他模板渲染到这些插座中。
在没有明确出口名称的情况下使用默认出口。对于命名的网点,渲染是通过在Route 的renderTemplate 钩子中调用render 来完成的。
为此,您可以在作为选项传递给render 方法的哈希中指定一个outlet 选项。
renderTemplate() {
this.render('recentPosts', { outlet: 'sidebar' });
}
在这里,模板recentPosts 将被渲染到其父模板内名为“sidebar”的插座中。
当路由嵌套在其他嵌套路由中时,它们将渲染到最近的父出口。如果父资源没有默认出口,则使用它的父资源,依此类推,直到达到application 模板。
当您在 Router 中声明 resource 和 this.resource('posts'); 时,您是在根据约定指出一些事情。
- 使用布局模板
posts 渲染posts 路由。
- (可选)使用模板
posts/index 渲染隐式 posts.index 路由。
posts 模板包含所有帖子通用的布局及其子资源。至少它必须至少包含一个默认插座,例如{{outlet}}。
没有这个{{outlet}} 子路由将没有直接的父出口来渲染。然后,它们将在该父级的父级或最终在 application 模板的出口中呈现。发生这种情况时,您将看到"The immediate parent route did not render into the main outlet ..." 警告。发生这种情况时,请检查您的 outlets 的位置。
posts.index 是给所有具有嵌套路由的资源的隐式路由。换句话说,如果您的资源具有嵌套路由,则无需显式声明嵌套的 this.route('index)`。
这条index 路由可以显示该资源的内容。例如,对于posts.index,您可以显示所有posts 的列表。此隐式路由的第二个警告是该模型位于父posts 路由上。您必须使用needs api 在PostsIndexController 中获取此模型。
needs: ['posts'],
contentBinding: 'controller.posts'
此外,posts.index 路由是可选的。您可以将用于显示帖子列表的 posts/index 中的 UI 直接放入 posts 模板本身。然而,这意味着任何子资源也将与帖子列表一起呈现,以及posts 中的出口。是否使用显式索引路由取决于需要显示的 UI。
位于所有其他模板之上的是application 模板。它必须有一个outlet 用于渲染嵌套资源,并且通常包含页面共有的布局。如果您未指定应用程序模板,则将使用默认模板。这个生成的模板等同于{{outlet}},即:- 一个只有一个默认出口的模板。
考虑以下路线。
App.Router.map(function() {
this.resource('posts', function() {
this.route('new')
this.resource('post', {path: ':post_id'}, function() {
this.resource('comments', function() {
this.route('new');
});
});
});
});
这里,posts.new 将被渲染为 posts,posts 将被渲染到 application 模板的默认出口中。下面列出了使用的其余模板。
+---------------------------+--------------------------------------------------------+
| Route | Templates used (default outlets) |
+---------------------------+--------------------------------------------------------+
| posts.index | posts.index > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.new | posts.new > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.post.index | post.index > post > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.post.new | post.new > post > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.post.comments.index | comments.index > comments > post > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.post.comments.new | comments.new > comments > post > posts > application |
+---------------------------+--------------------------------------------------------+
可以通过为render 方法指定into 选项来更改此默认模板层次结构。
renderTemplate: function() {
this.render('posts', { into: 'sidebar' })
}
这里posts 模板将渲染到sidebar 模板的默认出口。
就是这样。 Outlet 是另一个使用大量约定而不是配置的 ember 概念。默认设置非常好,同时易于自定义。