覆盖Emberjs中的application.hbs模板

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在所有路由中都尽可能少并通用。 您应该做的是为您的应用程序生成顶级路由。

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

ember g路由登录ember g路由登录/索引ember g路由登录/忘记密码ember g路由认证的ember g路由认证的/索引ember 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}}

和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}}

然后，所有经过身份验证和登录的路由都将在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
    });
  });