模板之間的鏈接

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。

希望它有幫助。