Question

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

有什么简单的解决方案吗？

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

谢谢。

Answer 1

我认为您需要使用{{outlet}}来实现此目的。通过覆盖应用程序模板

在需要显示不同模板的地方创建不同的出口

{{outlet}} //application hbs default one

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

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

应该有view1.hbs和view2.hbs才能呈现这些模板

Answer 2

将application.hbs最小化，并在所有路由中保持通用。您应该做的就是为您的应用程序生成顶级路由。

说您有一个通用设置，其中有一个经过身份验证的部分，登录后和登录部分。登录前和登录后通常会有不同的顶层模板。尝试这样的事情：

琥珀色路线登录余烬路线登录/索引余烬路线登录/忘记密码余烬路线认证余烬路线认证/索引余烬路线认证/配置文件等等...

您的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}}

和authenticated.hbs这样：

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

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

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

如果您的application.hbs看起来像这样：

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

然后所有经过身份验证和登录的路由都将在通用站点容器中，并且都将显示带有网站名称的h2。

其中一个重要说明（我看到很多人对此感到困惑）是，此文件夹结构并不决定路线的实际路径。

路由器可能是这样配置的，以避免在URL中显示“已验证”： Router.js

  // login.index route assumed at root url /login
  this.route('login', { path: '/login' }, function() {
    // avail at /login/forgot-password
    this.route('forgot-password', { path: '/forgot-password' }
  });

  //authenticated.index.hbs assumed at root avail at /
  //notice that the authenticated parent route has a route of "/"
  this.route('authenticated', { path: '/' }, function() { 

    // authenticated.profile route avail at /profile
    this.route('profile', { path: '/profile' });

    // as an exmaple you can further nest content to your desire
    // if for instance your profile personal info section has a parent 
    // template/route
    this.route('', { path: '/personal-info' }, function() {
      this.route('address', { path: '/address' }); //profile/personal-info/address
    });
  });

覆盖Emberjs中的application.hbs模板

2 个答案: