模板之间的链接

debugcn 发表于 Dev

Meph-

我不了解模板和路线。

我的代码：

 <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指南做到的。

直观像素

您需要定义要链接到的模板应显示的位置，这样的占位符称为an outlet，因此只需{{outlet}}在application模板中的希望添加路由的位置添加相应的模板即可：

另请注意，将linkTo调用帮助程序linkTo，而不link-to取决于您使用的ember版本：

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