灰烬路线和链接结构

Question

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

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>