Templates 在Emberjs中重写application.hbs模板

在emberjs中，我的应用程序已经有了使用application.hbs模板的路由模板，但现在我想创建一个不使用application.hbs的新路由模板

有什么简单的解决办法吗

我已经看到了很多答案，但这与我的规范不符，而且我的ember版本是2.11

---

谢谢。

我认为您需要使用

{{outlet}

来实现这一点。 通过覆盖应用程序模板，在需要显示不同模板的位置创建不同的出口

{{outlet}} //application hbs default one

{{outlet "view1"}} // another template

{{outlet "view2"}} //another template

---

应该有

view1.hbs

和

view2.hbs

，以便呈现这些模板

尽可能使application.hbs在所有路线上保持最小和通用。您应该做的是为应用程序生成顶级路由

假设您有一个公共设置，其中有一个经过身份验证的部分、登录后部分和登录部分。登录前和登录后通常会有不同的顶级模板。试着这样做：

{{yellow-navbar}}
{{outlet}}

{{pink-navbar}}
{{user.name}}
{{outlet}}

{{#general-site-container}}
  <h2>Website Name</h2>
  {{outlet}}
{{/general-site-container}}

恩伯g路线登录 ember g路线登录/索引 恩伯g路线登录/忘记密码 余烬g路线认证 ember g路由已验证/索引 恩伯g路线认证/配置文件 等等

您的login.hbs将有自己的样式，并且可能有子路由，它将假定该样式并将后续嵌套模板放置在其他人提到的{outlet}中

文件结构：

routes/
-login/
----index.hbs
----forgot-password.hbs
-authenticated/
----index.hbs
----profile.hbs
login.hbs
authenticated.hbs
application.hbs

在上面的示例中，login.hbs可能如下所示：

{{yellow-navbar}}
{{outlet}}

{{pink-navbar}}
{{user.name}}
{{outlet}}

{{#general-site-container}}
  <h2>Website Name</h2>
  {{outlet}}
{{/general-site-container}}

和已验证的.hbs，如下所示：

{{yellow-navbar}}
{{outlet}}

{{pink-navbar}}
{{user.name}}
{{outlet}}

{{#general-site-container}}
  <h2>Website Name</h2>
  {{outlet}}
{{/general-site-container}}

现在，login/index.hbs和login/forget-password.hbs模板将呈现在login.hbs出口中。这两个页面都将呈现一个黄色导航栏，然后显示它们自己的内容

由于authenticated.hbs是另一个顶级父路由，authenticated/index.hbs和authenticated/profile.hbs都将在粉色导航栏和当前用户名的显示下呈现其内容

如果您的application.hbs如下所示：

{{yellow-navbar}}
{{outlet}}

{{pink-navbar}}
{{user.name}}
{{outlet}}

{{#general-site-container}}
  <h2>Website Name</h2>
  {{outlet}}
{{/general-site-container}}

---

application.hbs是根模板。如果你不想使用它，你需要重新调整你的路线。可以将application.hbs中当前的内容提取到application/index.hbs中。如果这是因为需要不同的布局，我会将变量显示移动到子routesInfact，每当我创建两个视图时，如本例中的view1.hbs和view2.hbs，那么这些视图将已经使用application.hbs模板。我的问题是，如果创建新的路由模板，如何覆盖application.hbs。您可以做的是在application.hbs中呈现{{outlet}}。保留application.hbs只是为了renderRoute不让其他任何东西将application.hbs中的内容移动到可以通过application.hbs进行渲染的子模板中，因此要渲染的逻辑和如何渲染应该在应用程序控制器中。假设您需要根据不同模板的用户级别呈现页面，您可以在应用程序控制器中使用逻辑来检查当前用户访问级别并相应地呈现模板-保持application.hbs干净