javascript - Ember 路由和链接结构

Question

我刚刚开始学习 ember。目前仍在尝试学习路线和网址。需要知道更好的方法来执行此操作，因为在我的 index.html 模板中，每个 Handlebars 模板中都有重复的代码来管理菜单。

apps.js

App = Ember.Application.create();

App.Router.map(function() {
   this.resource('home', { path: '/' });
   this.resource('students');
   this.resource('about');
});

index.html

<script type="text/x-handlebars" id="home">
  <b>HOME</b>
  {{#link-to 'students'}}Students{{/link-to}}
  {{#link-to 'about'}}About{{/link-to}}

  <h1>Welcome to my Ember Web App</h1>
</script>

<script type="text/x-handlebars" id="students">
  {{#link-to 'home'}}HOME{{/link-to}}
  <b>Students</b>
  {{#link-to 'about'}}About{{/link-to}}

  <h1>Students List</h1>
</script>

<script type="text/x-handlebars" id="about">
  {{#link-to 'home'}}HOME{{/link-to}}
  {{#link-to 'students'}}Students{{/link-to}}
  <b>About{</b>

  <h1>About this web app</h1>
</script>

预先感谢您的帮助。

Answer 1

您应该使用应用程序模板来添加页眉和页脚等内容。 documentation 中有很好的描述。 .

因此，您需要一个如下所示的模板:

<script type="text/x-handlebars">
    {{#link-to 'index'}} HOME {{/link-to}}
    {{#link-to 'students'}}Students{{/link-to}}
    {{#link-to 'about'}}About{{/link-to}}
    <div>
    {{outlet}}
    </div>
</script>

这样，特定路由的模板就会变得明显更小，因为它们会渲染到您在应用程序模板中放置 {{outlet}} 表达式的位置。

<script type="text/x-handlebars" id="students"> 
  <h1>Students List</h1>
</script>