Ember 翻译——教程三：路由和模板

最新推荐文章于 2020-12-06 07:06:41 发布

Dale_H

最新推荐文章于 2020-12-06 07:06:41 发布

阅读量539

点赞数

分类专栏：前端 Ember 文章标签： ember ember翻译 ember教程 ember路由 ember模板

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Ember

20 篇文章 0 订阅

订阅专栏

路由和模板

Ember 使用路由来定义我们应用中逻辑性的、可访问的页面。

在“超级租赁”中，我们想要访问展示租赁信息列表的首页。从这里，我们将能导航到一个关于页和一个联系页。

让我们从关于页开始。请记住，当加载 /about 这个 URL 的时候，路由将把 URL 映射到同名的路由处理程序中——about.js。这个路由处理程序将将加载一个模板。

路由和模板

一个关于页路由

如果我们运行 ember help generate，我们能看到 Ember 中的一系列工具将自动为各种 Ember 资源生成文件。让我们使用路由生成工具来生成我们的 about 路由。

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

这里创建了三个新文件：一个是路由处理程序，一个是路由处理程序将渲染的模板，以及一个测试文件。第四个被涉及的文件路由。

当我们打开路由的时候，我们可以看见生成器为我们映射了一个新的 about 路由。这个路由将加载 about 路由处理程序。

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 路由将加载一个 about.hbs 模板。这意味着我们不必为了让 about.hbs 像我们所期望那样去渲染，而在 app/routers/about.js 中修改任何东西。

当所有生成器生成的文件到位后，我们可以获得编码模板的权利。至于我们的 about 页面，我们将添加一些带有网站信息 HTML到里面：

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>

在 shell 中执行 ember server （或者缩写为 ember s）来启动 Ember 开发专用服务器，然后访问 http://localhost:4200/about 来实际访问我们新的 app。

一个联系页路由

让我们创建另一个用于公司详细联系方式的路由。我们将再一次从生成一个路由、一个路由处理程序和一个模板开始。

ember g route contact

我们可以看见我们的生成器创建了一个位于 app/router.js 中的 contact 路由，以及一个位于 app/routes/contact.js 中的相应的路由处理程序。既然我们将使用 contact 模板，那么 contact 路由将不需要任何额外的修改。

在 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}} helper

我们真心不希望必须知道具体的 URL 才能实现页面的跳转，所以我们在每个页面的底部添加了一些导航性的链接。让我们在关于页添加一个联系也链接、在联系页添加一个关于页链接。

Ember 拥有一个内置的 helpers 用来提供诸如链接到其它路由之类的功能。我们将在我们的代码中使用 {{link-to}} helper 来连接不同路由：

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"}}
    Get Started!
  {{/link-to}}
</div>

{{link-to}} helper 拥有即将链接到的路由的名字作为一个参数，比如这里的： contact。当我们通过 http://localhost:4200/about 访问我们的关于页时，我们那时将拥有一个能正常链接到我们联系页的链接。

现在，我们将添加一个指向我们联系页的链接，使得我们能够在about 和 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 的路由来达成这一点。

ember g route rentals

让我们通过一些基础的标记更新新生成的 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>

一个首页路由

当我们的两个静态页面就位后，我们就已经为添加欢迎用户用的首页做好了准备。这时候，我们应用的主页还是我们的租赁页面信息，这是我们已经创建了一个路由的。所以我们希望我们的首页只需要简单的指向我们已经创建的 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 是极为特殊的：在路由映射中，它不需要一个入口。我们将学习为什么当我们访问嵌套路由时不需要一个入口。

我们可以从为 index 安装单元测试开始。既然我们想要过渡到 rentals，我们的单元测试将确保路由的 replaceWith 方法被期望的路由执行。replaceWith 和路由的 transitionTo 非常相似，不同点是 replaceWith 方法将替换浏览器历史记录中当前的 URL，而 transitionTo 方法将（地址）添加到历史记录中。既然我们想要我们的 rentals 路由作为我们的首页，那么我们将使用 replaceWith 方法。我们将证明通过为路由移除 replaceWith 方法，同时认为当被访问的时候 rentals 路由将被传入进去。

tests/unit/routes/index-test.js

import { moduleFor, test } from 'ember-qunit';
moduleFor('route:index', 'Unit | Route | index');

test('should transition to rentals route', function (assert) {
    let route = this.subject({
        replaceWith(routeName) {
            assert.equal(routeName, 'rentals', 'replace with route name rentals');
        }
    });
    route.beforeModel();
});

在我们首页的路由里，我们简单地添加对 `replaceWith` 的调用。
> app/routes.index.js

import Ember from ‘ember’;

export default Ember.Route.extend({
beforeModel() {
this._super(…arguments);
this.replaceWith(‘rentals);
}
});

现在访问根目录 / 最终会加载 /rentals 地址。

添加一个导航栏

除了在我们应用的每一个路由提供按钮风格的链接外，我们希望提供一个通用的导航栏来展示我们应用的标题和它的主页。

首先，通过输入 ember g template application 创建一个应用模板。

installing template
  create app/templates/application.hbs

当 application.hbs 存在滞后，任何你放到其中的内容都将在应用的每个页面得到展示。现在添加如下的导航栏标记：

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

注意在页面中 div 元素包含的 {{outlet}} 。 {{outlet}} 将延迟路由（渲染），它将在其所在位置为当前路由渲染其内容，而这意味着我们为我们应用开发的不用路由都将被在这里渲染。

既然我们已经为它们添加了路由和链接，我们为路由导航而创建三个验收测试将在此时被传递。

原文地址

Dale_H

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ember 翻译——教程三：路由和模板

路由和模板Ember 使用路由来定义我们应用中逻辑性的、可访问的页面。在“超级租赁”中，我们想要访问展示租赁信息列表的首页。从这里，我们将能导航到一个关于页和一个联系页。让我们从关于页开始。请记住，当加载 /about 这个 URL 的时候，路由将把 URL 映射到同名的路由处理程序中——about.js。这个路由处理程序将将加载一个模板。
复制链接

扫一扫