模板之间的链接

Question

我不明白模板和路线。

我的代码：

<script type="text/x-handlebars" data-template-name="application"> 
    Hello 
    <nav> 
    {{#link-to 'index'}}Index{{/link-to}} 
    {{#link-to 'about'}}About{{/link-to}} 
    {{#link-to 'contact'}}Contact{{/link-to}} 
    </nav> 
    </script> 
    <script type="text/x-handlebars" data-template-name="about"> 
    about 
    </script> 
    <script type="text/x-handlebars" data-template-name="contact"> 
    favorites 
    </script> 

和router.js：

App.Router.map(function() { 
    this.route("index", { path: "/" }); 
    this.route("about", { path: "/about" }); 
    this.route("contact", { path: "/contact" }); 
}); 

有什么不对？输出是空白页面。当我插入{{＃link-to}}代码时出现问题。 我是通过emberjs guide做到的。

Answer 1

您需要定义您的模板要链接到应该显示的地方，这样的占位符被称为outlet，所以只需添加{{outlet}}凡在你application模板你想对应的模板，你的路由被渲染成：

还要注意，在linkTo助手被称为linkTo而不是link-to取决于你所使用的余烬发布：

<script type="text/x-handlebars" data-template-name="application"> 
    Hello 
    <nav> 
    {{#linkTo 'index'}}Index{{/linkTo}} 
    {{#linkTo 'about'}}About{{/linkTo}} 
    {{#linkTo 'contact'}}Contact{{/linkTo}} 
</nav> 
{{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="about"> 
    about 
</script> 
<script type="text/x-handlebars" data-template-name="contact"> 
    favorites 
</script> 

工作jsbin。

希望它有帮助。