Ember旅程系列(三) -- 路由与模版
来源:互联网 发布:淘宝上的1号胶囊是什么 编辑:程序博客网 时间:2024/05/18 03:51
英文原版: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.hbsupdating router add route aboutinstalling route-test create tests/unit/routes/about-test.js
Ember的路由由三部分构成:
- 一条Ember路由条目(/app/router.js),它在路由名称和URL之间建立的映射。
- 一个路由处理程序文件,它描述了当路由被访问时会执行的动作(app/routes/about.js)。
- 一个路由模版,用来显示真正的页面元素(app/routes/about.js)。
如果我们打开/app/router.js,将会看见在Router.map方法中由一行新加入的代码 – “this.route(‘about’)“。 这行代码将告诉路由当用户访问/about这个路径时,执行app/routes/about.js文件。
app/router.jsimport 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.hbsinstalling 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这三个页面之前切换了。
- Ember旅程系列(三) -- 路由与模版
- Ember旅程系列(十一) -- 嵌套路由
- Ember旅程系列(十) -- 服务与工具
- Ember旅程系列(四) -- 模型钩子
- Ember旅程系列(五) -- 安装插件
- Ember旅程系列(终章) -- 部署
- Ember旅程系列(八) -- 使用Ember Data
- Ember旅程系列(一) -- 创建你的应用
- Ember旅程系列(二)-- 设计的你应用
- Ember旅程系列(六) -- 创建简单组件
- Ember旅程系列(七) -- 创建Handlerbars助手
- Ember旅程系列(九) -- 构建一个比较复杂的组件
- Ember 翻译——教程三:路由和模板
- Ember.js 介绍系列 (待续)
- 交换与路由练习(三、生成树 静态路由)
- 交换与路由知识点总结(三)
- 高三,是与信息再见,还是新的旅程?
- Ember 翻译——路由:介绍
- GMIS 2017大会邓力演讲:无监督学习的前沿与SPDG方法的优良性
- 字符串反转实现
- ACM 中的 关于 io
- 参加全国大学生计算机应用能力与素养大赛感想
- 思想决定行为,行为决定习惯,习惯决定性格,性格决定命运
- Ember旅程系列(三) -- 路由与模版
- JS获取当前时间戳的方法
- xmpp基本概念_节(stanza)
- Android进阶-view 的事件分发机制
- 适配器模式
- 专业课程设计之客户与服务器程序的同步与通信机制的设计(三)数据共享和线程
- 正则大全
- 个人技术支持
- STL中正则表达式的应用