Routing / Ember中的路由

1.Basic Routes

1.1 Router.map()

Map() 方法用来规定一个URL应该返回哪个route。

Router.map(function() {
  this.route('about', { path: '/about' });
  this.route('favorites', { path: '/favs' });
});
当路径与route名称相同时,可以省略路径。

在模板中,{{link-to}} 来设置路由跳转。

1.1 创建内联Route(nested route)
router.js() {
    this.route(‘posts’,function() {
        this.route(“new”);
    }
}

使用命令ember g route posts/new 来自动创建二级路由new。
(需要安装ember-cli)

然后在模板中(Templates) 要显示二级路由new的地方,增加 {{outlet}}。
当用户访问 posts 路由时,posts 别渲染出来,当用户访问new路由时,ember将在
{{outlet}} 的地方渲染出new 的templetas。

字路由的名字包括他父路由的名字,当调用到二级路由时(transitionTo 或这{{outlet}} ) ,注意名字应为全名,例如,应为posts.new,而不是new。

每个路由都有一个默认的index路由,如果你定义了一个路由的二级路由,那么当用户访问这个路由时,Ember会渲染这个路由的index路由,如果用户访问了这个路由另一个字路由,那么Ember就会将index子路由替换为当前访问的子路由。
例如:

Router.map(function) {
    This.route(‘index’,{path: ’/’});
    This.route (‘post’,function() {
        This.route(‘index’,{path: ‘/’});
        This.route(‘new’,{path: ‘new’});
    )};
});

当用户访问post路由时,ember渲染 post.index ,当用户访问/post/new 时,ember渲染post.new。也就是将Templete中{{outlet}}地方的渲染从index路由 替换成了 new路由。

1.2 Dynamic Segments动态细分

路由的一个作用是加载一个model。
比如有一个路由是posts,它加载所有的posts model
但是,当我们想要加载某一篇post的时候,应该怎么办呢
这时就用到了 Dynamic Segments,它是URL的一部份,以:开始,后边跟着一个识别符。
比如/comment/:comment_id

1.3 globbing routes 通配符的路由

globbing route的意识就是,可以定义一个路由,来匹配多个路径。
我们可以用这样的路由来应对用户进入不该进入的路径的情况。
通配路由以一个asterisk (星号)开始,例如

this.route(‘not-found’, { path: ‘/*path’ });

1.4 Route Handlers路由处理器

可以来创建一个RouterHandlers来让Route实现除了返回同名字的Template的其他功能。

具体如何创建一个路由处理器,参考官方API文档 The RouteRoute Handlers

2. Specifying a Route's Model / 确定一个路由模型

我们可以使用 model() hook 来使 favorite-posts 路由加载相应的post
例如:

import Route from '@ember/routing/route';
export default Route.entend({
  model () {
      return this.get('store').query('post', { favorite: true});
  }
})

通常,model hook 应该返回一个 Ember data,但是它也可以返回任何形式的 promise 的对象(或数组),Ember 会一直等待,知道lodading finished 或者 promise 完成。

之后,路由会将model返回的值设置为model的属性(property),然后我们就可以在模板(template)中使用model属性了。
例如:

<h1>Favorite Routs</h1>
{{#each model as |post|}}
  <p>{{post.body}}</p>
{{/each}}

3. Render a Template / 渲染模板

路由的一个作用是将合适的模板渲染到屏幕上,默认情况下,路由会将相同名字的模板渲染出来。
例如:

Router.map(function() {
        this.route( 'posts' , function () {
                this.route('new');
        })
})

post路由会渲染post.hbs模板,posts.new会渲染post/new.hbs模板。

每个模板,都会被渲染到它的父路由的模板的{{outlet}}标签处。

可以通过设定模板标签名称的方式,来进一步控制模板的渲染。
例如:

import Route from '@ember/routing/route';

export default Route.extend({
  templateName: 'posts/favorite-posts'
});

我们也可以通过重载 randerTemplate()方法来控制模板的渲染。

4. Redirecting / 重定向

当用户尝试访问不能访问的页面时,我们需要将用户访问的页面重定向到我们设定好的页面,比如登陆页面或者首页等。

4.1 路由中定义重定向

可以使用transitionTo()方法和replaceWith()方法来进行路由的重定向。
这两个方法唯一的不同在于,transitionTo() 是离开当前的路由,然后渲染一个新的路由。而replaceWith()是将当前路由替换为重定向重定向的路由。这个差别体现在对网站访问的历史的影响不同。

4.2 在controller中设置重定向

controller中设置路由重定向则使用transitionTo()方法。

5. 在路由执行之前重定向

我们一般希望用户访问没有权限的路由时,此路由不渲染然后立马重定向到我们设置好的路由。
这时可以在beforeModel()中定义路由重定向,这样就能在路由渲染之前实现重定向了。

6. 在路由执行之后重定向

有时候我们需要知道当前路由的一些信息来决定应该重定向到哪个路由上去。
这时应该在afterModel()中定义路由重定向。
它有两个参数,一个是当前的路由,另一个是重定向的路由。
例如:

import Route from '@ember/routing/route';

export default Route.extend({
  afterModel(model, transition) {
    if (model.get('length') === 1) {
      this.transitionTo('post', model.get('firstObject'));
    }
  }
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 命名约定 我们在使用Ember.js创建routes,controllers和templates时,要遵循Embe...
    江枫阅读 760评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,596评论 18 139
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,159评论 22 257
  • 忙碌的日子总惦着要写几个字,清闲的日子却又无写字的欲望,真是矛盾。人性复杂,大抵就指这所思所想吧。偶尔擦出些...
    灵芙醉客阅读 274评论 2 0
  • 你以为你很努力,你很拼命,你已经使出了自己的洪荒之力,也许只是别人的起点,可能站着说话不腰疼,立场不同。 每当我们...
    秋艳洞见阅读 229评论 0 0