Ember.js - 默认模板渲染到插座？ [英] Ember.js - default template to render into an outlet?

问题描述

所以我有一个页面看起来像以下

  [Nav Bar] 
 
 | | 
 |内容| 
 | | 
  

导航栏我想在所有页面上保持不变。所以我使用的方法是将我的页面设置如下：

  [Nav Bar] 
 
 {{outlet}} 
  

这是非常好的，我现在可以将不同的页面呈现到我的插座，用于不同的路线

但是，如果我想要将默认模板呈现到我的主页的插座，该怎么办？

我已经设法通过将 / 重定向到 / home 来实现这一点，但是必须有一个更好的方法来做到这一点这允许我在 / 下呈现默认主页，而不需要重新路由？

任何建议赞赏， p>

谢谢，
丹尼尔

解决方案

{root}}，您必须为索引定义一个处理程序栏脚本：

您的导航栏代码可能如下所示：

 < script type =text / x-handlebars> 
< div class =navbar ...> 
 ... 
< / div> 
 
 {{outlet}} 
< / script> 
  

将放置在{{outlet}}内的根页面是休息：

 < script type =text / x-handlebarsid =index> 
< div class =container> 
< h1>根页面!!< / h1> 
< / div> 
< / script> 
  

换句话说，您必须创建一个句柄脚本，该脚本将具有id =索引。

应该工作。它不需要任何js代码工作。

So I have a page which looks like the following

[ Nav Bar ]

|         |
| Content |
|         |

The nav bar I want to be constant across all pages. So the approach I used was to set my page up as follows:

[ Nav Bar ]

{{outlet}}

This is great, I can now render different pages into my outlet for different routes.

But what if I want a default template to be rendered into the outlet for my home page?

I've managed to achieve this by redirecting / to /home, but there must be a better way to do this which allows me to render a default home page at / without re-routing?

Any advice appreciated,

Thanks, Daniel

解决方案

To render stuff in the {{outlet}} at the root page /, you have to define a handlerbar script for index:

Your navbar code probably look like this:

<script type="text/x-handlebars">
  <div class="navbar ...">
    ...
  </div>

  {{outlet}}
</script>

The root page that will be place inside {{outlet}} is the fallowing:

<script type="text/x-handlebars" id="index">
    <div class="container">
      <h1>Root page!!</h1>
    </div>
</script>

In other words, you have to create a handlebar script that will have an id="index".

Should work. It doesn't need any js code to work.

这篇关于Ember.js - 默认模板渲染到插座？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！