ember.js - 模板之间的链接

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>

和路由器.js：

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

怎么了？输出是空白页。插入 {{#link-to}} 代码时出现问题。我是通过 emberjs指南做到的。

Answer 1

您需要定义一个您链接到的模板应该显示的位置，这样的占位符称为 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>

工作jsbin。

希望能帮助到你。