Ember旅程系列（三） -- 路由与模版

英文原版：https://guides.emberjs.com/v2.13.0/tutorial/routes-and-templates/

对于Super Rentals这个项目，我们首先是要能够访问到它的主页。然后紧接着可以访问到 关于页面 和 联系页面。

about路由

让我们从构建“about“页面开始。

在Ember中，当我们想创建一个通过URL访问的新页面时，我们需要使用Ember CLI来生成路由。你可以通过阅读核心概念章节来快速的浏览Ember的架构。

好了，那么现在就生成一个路由吧：

ember generate route about

或

ember g route about

以下是我们生成的所有资源的名单：

installing route
  create app/routes/about.js
  create app/templates/about.hbs
updating router
  add route about
installing route-test
  create tests/unit/routes/about-test.js

Ember的路由由三部分构成：

1. 一条Ember路由条目（/app/router.js），它在路由名称和URL之间建立的映射。
2. 一个路由处理程序文件，它描述了当路由被访问时会执行的动作（app/routes/about.js）。
3. 一个路由模版，用来显示真正的页面元素（app/routes/about.js）。

如果我们打开/app/router.js，将会看见在Router.map方法中由一行新加入的代码 – “this.route(‘about’)“。 这行代码将告诉路由当用户访问/about这个路径时，执行app/routes/about.js文件。

app/router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('about');
});

export default Router;

由于目前我们只打算展示一个静态的 about页面，所以目前并不打算改动/app/routes/about.js文件。相反的，打开/app/templates/about.hbs模版并且加入以下内容：

app/templates/about.hbs

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
</div>

好了，启动服务器。访问http://localhost:4200/about ，看看我们的新页面吧。

Contact路由

让我们再来创建另外一个路由，用来展示租赁网站公司的详细信息。跟刚才一样：

ember g route contact

这里我们又做了跟上一小节同样的事情，在app/router.js中会增加一个新条目，并且也会再生成一个路由处理程序app/routes/contact.js。

接着，更改/app/templates/contact.hbs模版文件，添加下面这些内容：

app/templates/contact.hbs

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>Super Rentals Representatives would love to help you<br>choose a destination or answer
    any questions you may have.</p>
  <p>
    Super Rentals HQ
    <address>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </address>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </p>
</div>

启动服务器，访问 http://localhost:4200/contact 看看效果。

使用{{link-to}}助手导航

目前看上去这个站点还有些死板，让它变的更灵活一点吧。我们将在about页面放一个连接到contact页面的超链接；相应地，在contact页面也放一个连接到about页面的链接。

为了完成这个目标，我们将使用Ember提供的{{link-to}}助手来帮我们实现路由之间的跳转，编辑about.hbs文件如下：

app/templates/about.hbs

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
  {{#link-to 'contact' class="button"}}
    Contact Us
  {{/link-to}}
</div>

这里，我们告诉了{{link-to}}助手将要连接的路由的名称 “contact“。好了，现在再启动服务器看一看http://localhost:4200/about 这个页面。我们已经有了一个可以跳转至contact页面的超链接了。

现在在contact页面也做相同的事情：

app/templates/contact.hbs

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>Super Rentals Representatives would love to help you<br>choose a destination or answer
    any questions you may have.</p>
  <p>
    Super Rentals HQ
    <address>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </address>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </p>
  {{#link-to 'about' class="button"}}
    About
  {{/link-to}}
</div>

Rentals路由

除了about页面和contact页面之外，我们还需要一个能页面能够罗列出所有的租赁信息。好，添加第三个路由并称之为 “retals“：

ember g route rentals

继续，编辑这个模版（/app/templates/rentals.hbs）如下所示，然后先放着一会回过头来再处理它：

app/templates/rentals.hbs

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome!</h2>
  <p>We hope you find exactly what you're looking for in a place to stay.</p>
  {{#link-to 'about' class="button"}}
    About Us
  {{/link-to}}
</div>

index路由

我们准备添加一个index路由，用来处理对根路径（“/”）的请求。并且让rentals页面来作为主页面。

创建index路由：

ember g route index

输出信息：

installing route
  create app/routes/index.js
  create app/templates/index.hbs
installing route-test
  create tests/unit/routes/index-test.js

与之前创建的其他路由不同的是，index路由是比较特殊的：它不会再app/router.js中创建条目。我们将会在后面的学习中了解到为何它不会创建条目（详见 嵌套路由 章节）。

我们想要得到的结果是，当用户访问“/”路径时将它直接引导至“/rentals”路径。为了实现它，我们需要在index路由处理程序中，使用一个名叫“beforModel”的钩子函数。

所有的路由都有一打生命周期钩子函数，它们会在读取页面的特定时刻触发。 beforeModel钩子会在“从model()钩子得到数据之前”、“页面渲染之前”执行。 在下一个章节我们会解释什么是model钩子。

在index路由处理函数中，我们将调用replaceWith()函数。 replaceWith()和transitionTo()有点类似，不同之处在于replaceWith()函数会替换掉在history对象中的当前url记录；而 transitionTo() 是在history对象中新加入一条url记录。

index处理程序代码如夏：

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
    this.replaceWith('rentals');
  }
});

现在，试试访问http://localhost:4200/。它应该会直接导航到“/rentals”路径。

添加一个导航条

相对于在每个路由上都添加到其他页面的超链接，我们还是倾向于在页面的顶部添加一个导航条。

为了将每一个页面的内容都显示出来，我们使用application.hbs模版文件（之前编辑过的）。打开它（/app/templates/application.hbs），把之前的内容替换为现在这样：

app/templates/application.hbs

<div class="container">
  <div class="menu">
    {{#link-to 'index'}}
      <h1>
        <em>SuperRentals</em>
      </h1>
    {{/link-to}}
    <div class="links">
      {{#link-to 'about'}}
        About
      {{/link-to}}
      {{#link-to 'contact'}}
        Contact
      {{/link-to}}
    </div>
  </div>
  <div class="body">
    {{outlet}}
  </div>
</div>

代码看上去之前差不了多少，{{outlet}}的位置有些许改变。{{outlet}}会告诉Ember将当前路由对应的内容渲染到它所在的位置。

到目前为止，我们应该可以自由的在about , contact和rentals这三个页面之前切换了。