4.2 Routing -- Defining Your Routes
一、概述
1. 当应用程序启动时,路由器负责显示模板,加载数据,另外还设置应用程序的状态。这是通过匹配当前URL到你定义的routes来实现的。
2. Ember app router中的Map方法可以被调用来定义URL映射。当调用Map时,你应该传递一个function,它将会被调用,this会被设置为一个对象,你可以用它来创建路由。
app/router.js
Router.map(function() {
this.route('about', { path: '/about' });
this.route('favorites', { path: '/favs' });
});
- 现在当用户访问/about,Ember.js将会渲染about模板。访问/favs将会渲染favorites模板。
3. 小心!你会得到一些默认的路由:route:application和route:index(对应的路径是"/")。
如果路径名字和路由名字一样你可以省略路径只写路由名字,例子:
app/router.js
Router.map(function() {
this.route('about');
this.route('favorites', { path: '/favs' });
});
在你的模板中,你可以使用{{link-to}}在路由之间跳转,使用和提供的路由方法相同的名字(例如/,名字是index)。
{{#link-to 'index'}}<img class="logo">{{/link-to}} <nav>
{{#link-to 'about'}}About{{/link-to}}
{{#link-to 'favorites'}}Favorites{{/link-to}}
</nav>
{{link-to}}还会添加一个active类指向当前激活的路由。
4. 你可以通过创建一个Ember.Route子类为一个路由自定义行为。例如,自定义当用户访问"/"时应该发生什么,创建route:index:
app/routes/index.js
export default Ember.Route.extend({
setupController(controller) {
// Set the IndexController's `title`
controller.set('title', 'My App');
}
});
对于index template来说controller:index是开始的上下文。现在你已经设置了title,你可以使用下面的模板了:
<!-- get the title from the IndexController -->
<h1>{{title}}</h1>
(如果你没有明确定义controller:index,Ember.js会自动为你生成。)
5. Ember.js根据你传递给this.route的name推算出routes和controllers的名字。
URL | Route Name | Controllerapp/controllers/ |
Routeapp/routes/ |
Templateapp/templates/ |
---|---|---|---|---|
/ |
index |
↳index.js |
↳index.js |
↳index.hbs |
/about |
about |
↳about.js |
↳about.js |
↳about.hbs |
/favs |
favorites |
↳favorites.js |
↳favorites.js |
↳favorites.hbs |
二、Nested Routes
你可通过传递给this.route一个回调函数来定义一个嵌套的routes。
app/router.js
Router.map(function() {
this.route('posts', { path: '/posts' }, function() {
this.route('new');
});
});
这个路由器创建这些路由:
URL | Route Name | Controllerapp/controllers/ |
Routeapp/routes/ |
Templateapp/templates/ |
---|---|---|---|---|
/ |
index |
↳index.js |
↳index.js |
↳index.js |
N/A | posts |
↳posts.js |
↳posts.js |
↳posts.hbs |
/posts |
posts.index |
↳posts.js ↳ posts/index.js |
↳posts.js ↳ posts/index.js |
↳posts.hbs ↳ posts/index.hbs |
/posts/new |
posts.new |
↳posts.js ↳ posts/new.js |
↳posts.js ↳ posts/new.js |
↳posts.hbs ↳ posts/new.hbs |
- 一个嵌套路由的名字包含它的祖先。如果你想切换到一个路由(通过transitionTo或者{{#link-to}}),确保使用路由的全名(posts.new或者new)。
- 也就是说,切换到posts或者创建一个链接到posts相当于切换到posts.index或者链接到posts.index。
- 和你希望的一样,访问/会渲染index模板。
- 访问/posts会有一点差异。它将会先渲染posts模板。然后,它将在posts模板的outlet中呈现posts/index模板。
- 最后,访问/posts/new将会先呈现posts模板,然后将会在它的outelet中呈现posts/new模板。
三、Resetting Nested Route Namespace
当你嵌套路由时,子路由不继承祖先的名字可能会是有益的。这允许你参考和重用一个给定的路由,也保持了类名较短。这相当于现在的行为弃用this.resource()函数。
你可以使用resetNamespace: true选项重新设置当前的"namespace":
app/roputer.js
Router.map(function() {
this.route('post', { path: '/post/:post_id' }, function() {
this.route('edit');
this.route('comments', { resetNamespace: true }, function() {
this.route('new');
});
});
});
这个路由器创建5个路由:
URL | Route Name | Controller | Route | Template |
---|---|---|---|---|
/ |
index |
app/controllers/index |
app/routes/index |
app/templates/index |
N/A | post |
app/controllers/post |
app/routes/post |
app/templates/post |
/post/:post_id2 |
post.index |
app/controllers/post/index |
app/routes/post/index |
app/templates/post/index |
/post/:post_id/edit |
post.edit |
app/controllers/post/edit |
app/routes/post/edit |
app/templates/post/edit |
N/A | comments |
app/controllers/comments |
app/routes/comments |
app/templates/comments |
/post/:post_id/comments |
comments.index |
app/controllers/comments/index |
app/routes/comments/index |
app/templates/comments/index |
/post/:post_id/comments/new |
comments.new |
app/controllers/comments/new |
app/routes/comments/new |
app/templates/comments/new |
- comments模板将会被加载在post的outlet中。所有在comments中的模板将会被加载在comments的outlet中。
- 对于comments资源来说,route,coutroller和view类名不会有post前缀。
四、Multi-Word Model Names
对于多字的models所有的名字都是驼峰命名除了动态字段。例如,一个model命名为BigMac将会有一个这样的路径/bigMacs/:big_mac_id,路由被命名为bigMac,模板被命名为bigMac。
五、Dynamic Segments
1. 路由处理器的一个职责是把一个URL转换为一个模型。
例如,如果我们的路由是this.route('posts'),我们的路由处理器将会是这样:
app/routes/posts.js
export default Ember.Route.extend({
model() {
return $.getJSON("/url/to/some/posts.json");
}
});
posts模板将会收到所有可用的posts列表作为它的上下文。
因为/posts代表一个复杂的模型,我们不需要任何额外的信息去了解要检索什么。然而,如果你需要一个路由代表一个单一的post,我们不会想要在路由器中硬编码每一个可能的post。
2. 输入动态字段。
一个动态字段是一个URL的一部分,它以:开始,紧随其后的是一个标识符:
app/router.js
Router.map(function() {
this.route('posts');
this.route('post', { path: '/post/:post_id' });
});
app/routes/post.js
export default Ember.Route.extend({
model(params) {
return $.getJSON("/url/to/some/posts/" + params.post_id + ".json");
}
});
如果在URL中不使用id属性,你应该在路由中定义一个序列化方法:
app/router.js
Router.map(function() {
this.route('post', { path: '/posts/:post_slug' });
});
app/routes/post.js
export default Ember.Route.extend({
model(params) {
// the server returns `{ slug: 'foo-post' }`
return Ember.$.getJSON('/posts/' + params.post_slug);
}, serialize(model) {
// this will make the URL `/posts/foo-post`
return { post_slug: model.get('slug') };
}
});
这个默认的serialize方法把model的id插入到路由的动态字段中。(例如:post_id)
六、Initial Routes(最初的)
应用程序中的一些路由是立即可用的:
- 当你的app第一次启动时会进入route:application。它渲染application模板。
- route:index是默认路由,当用户访问/时,将会渲染index模板(除非/已经被你自定义的路由重写)。
- 这些路由是每一个应用程序的一部分,所以你不用在你的app/router.js中指定它们。
七、Wildcard/Globbing Routes(通配符)
你可以定义通配符路由,它可以匹配更多路由。例如,当用户输入不正确的URL与你的app不匹配时,你需要一个catch-all路由。
app/router.js
Router.map(function() {
this.route('catchall', { path: '/*wildcard' });
});
比如所有的路由都有一个动态字段,当你使用{{link-to}}或者transitionTo编程进入路由时你必须提供一个上下文。
app/routes/application.js
export default Ember.Route.extend({
actions: {
error() {
this.transitionTo('catchall', 'application-error');
}
}
});
有了这个代码,如果错误冒泡到应用程序的路由,你的app将进入catchall路由并且在URL中显示/application-error。
4.2 Routing -- Defining Your Routes的更多相关文章
- A Quick Introduction to Linux Policy Routing
A Quick Introduction to Linux Policy Routing 29 May 2013 In this post, I’m going to introduce you to ...
- [Angular2 Router] Configuring a Home Route and Fallback Route - Learn An Essential Routing Concept
In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly ...
- Routes
Routes Routing lets you create your own URL paths, based on the path you can load a closure or a con ...
- Meandering Through the Maze of MFC Message and Command Routing MFC消息路由机制分析
Meandering Through the Maze of MFC Message and Command Routing Paul DiLascia Paul DiLascia is a free ...
- Difference between RouteTable.Routes and HttpConfiguration.Routes?
https://stackoverflow.com/questions/12533782/difference-between-routetable-routes-and-httpconfigurat ...
- Flume官方文档翻译——Flume 1.7.0 User Guide (unreleased version)(一)
Flume 1.7.0 User Guide Introduction(简介) Overview(综述) System Requirements(系统需求) Architecture(架构) Data ...
- 7.1SportsStore:Navigation and Checkout
准备示例项目 使用真实的产品数据 现在,要切换到使用真实的数据,从Deployd服务器获取. AngularJS通过一个叫做$http的服务,为Ajax请求提供支持.作者将在第三部分详细讲解它是怎么工 ...
- Understanding the Router
Understanding the Router Our module is coming along nicely. However, we're not really doing all that ...
- Ember.js学习教程 -- 目录
写在前面的话: 公司的新项目需要用到Ember.js,版本为v1.13.0.由于网上关于Ember的资料非常少,所以只有硬着头皮看官网的Guides,为了加深印象和方便以后查阅就用自己拙劣的英语水平把 ...
随机推荐
- elastic-job(lite)使用的一些注意事项
前段时间项目开发中用到了当当开源的elastic-job,使用过程遇到一些问题,虽然不见得会影响写代码,但作为一个致力于搬好每一块砖的码农,当碰到问题时,我们不应该逃避,应该本着有困难也要上,没有困难 ...
- java总结(1)——java的特点
之前学习java仅仅是单纯的学习,老师要求学习.所以就学习.可是没有细致考虑过java的一些特别之处,比方,我们为什么要学习java而不是其它的语言,它必定有选择它的特点.所以,从如今開始,仅仅有埋头 ...
- Android 权限信息
访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permiss ...
- Spring 工作流程简单介绍
Spring Web MVC 处理Http请求的大致过程: 一旦Http请求到来,DispatcherSevlet将负责将请求分发. DispatcherServlet可以认为是Spring提供的前端 ...
- Android英文文档翻译系列(2)——HandlerThread
public class HandlerThread extends Thread Class Overview Handy class for starting a new threa ...
- AndroidWear开发之开发环境[前奏]
上篇教程教的是如何下载最新的SDK http://www.cnblogs.com/bvin/p/3811751.html 一.Eclipse下的尝试 之前以为在Eclipse下把SDK,ADT更新一下 ...
- 谈谈java中的构造函数
from 本篇博文主要是为新手.对java语言感兴趣的人和那些没有系统学习过java基础知识的人进行一个总结,在文章中对构造函数进行了较为详细的说明和讨论,也包含了我个人对于java面向对象中构造函数 ...
- JS-比较函数中嵌套函数,可以排序【对象数组】
function createCompareFun(propertyName){ return function(object1,object2){ var value1 = object1[prop ...
- 360全景图three.js
1.three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能. Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影. ...
- Codeforces 603E Pastoral Oddities
传送门:http://codeforces.com/problemset/problem/603/E [题目大意] 给出$n$个点,$m$个操作,每个操作加入一条$(u, v)$长度为$l$的边. 对 ...