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。

希望它有所帮助。

模板之间的链接

1 个答案: