Ember 翻译——教程三:路由和模板
来源:互联网 发布:js将div内容清空 编辑:程序博客网 时间:2024/06/08 02:44
路由和模板
Ember 使用路由来定义我们应用中逻辑性的、可访问的页面。
在“超级租赁”中,我们想要访问展示租赁信息列表的首页。从这里,我们将能导航到一个关于页和一个联系页。
让我们从关于页开始。请记住,当加载 /about
这个 URL 的时候,路由将把 URL 映射到同名的路由处理程序中——about.js。这个路由处理程序将将加载一个模板。
- 路由和模板
- 一个关于页路由
- 一个联系页路由
- 通过链接和 link-to helper
- 一个租赁信息路由
- 一个首页路由
- 添加一个导航栏
一个关于页路由
如果我们运行 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.hbsupdating router add route aboutinstalling 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.hbsinstalling 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}}
将延迟路由(渲染),它将在其所在位置为当前路由渲染其内容,而这意味着我们为我们应用开发的不用路由都将被在这里渲染。
既然我们已经为它们添加了路由和链接,我们为路由导航而创建三个验收测试将在此时被传递。
原文地址
- Ember 翻译——教程三:路由和模板
- Ember 翻译——教程十一:添加嵌套路由
- Ember 翻译——路由:介绍
- Ember 翻译——教程十:服务和功能
- Ember 翻译——教程六:使用 Ember Data
- Ember 翻译——教程十二:部署
- Ember 翻译——教程一:创建你的 APP
- Ember 翻译——教程二:设置测试
- Ember 翻译——教程四:模型钩子
- Ember 翻译——教程五:安装插件
- Ember 翻译——教程八:创建一个 Handlebars helper
- Ember 翻译——入门三:核心概念
- Ember 翻译——对象模型:二、类和实例
- Ember 翻译——入门二:安装 Ember
- Ember 翻译——对象模型:一、Ember 中的对象
- Ember.js 入门指南——番外篇,路由、模板的执行、渲染顺序
- Ember 翻译——官网首页
- Ember 翻译——引导页
- Bootstrap—200多种字体图形,你想要的都在这里
- Ember 翻译——教程二:设置测试
- python之一键序列化命名当前目录
- AndroidWIFI的基本实现
- 基于Python的网页文档处理脚本实现
- Ember 翻译——教程三:路由和模板
- 个人搭建hexo并部署到github期间遇到的问题
- http协议概念及其工作流程
- Pycharm 2016.3 注册码 mac 亲测可用
- 每日一结,分页查询和Listener监听器
- 【IDEA】IDEA常用配置
- hexo部署问题:spawn git ENOENT
- 实现div的大小随着内容进行动态改变
- apache https配置方法,apache https配置步骤