[英]Undestanding Ember Route hooks to redirect
I have this router setup 我有这个路由器设置
this.route('dashboard', function () {
this.route('numbers');
this.route('workspaces', function () {
this.route('workspace', {path: '/:wid'});
});
dashboard.workspaces is a link in navigation bar. dashboard.workspaces是导航栏中的链接。 When you click it loads dashboard.workspaces.workspace and immediately redirects to first subnav.
单击时,它将加载dashboard.workspaces.workspace,并立即重定向到第一个子导航。 I do it like this:
我这样做是这样的:
export default Ember.Route.extend({
model: function() {
return this.modelFor('dashboard');
},
afterModel: function(model) {
this.transitionTo('dashboard.workspaces.workspace', model.get('workspaces.firstObject.id'));
}
}
It's all good except when I'm already on dashboard.workspaces.workspace route and click dashboard.workspaces then "afterModel" hook is not called and I end up on dashboard.workspaces, which is unwanted empty page. 一切都很好,除了当我已经在dashboard.workspaces.workspace路线上并单击dashboard.workspaces然后未调用“ afterModel”钩子而我最终进入dashboard.workspaces时(这是不需要的空白页)。 Are there other hook that would be always called?
是否还有其他总是被称为的钩子? I have already tried "activate" and few others with no luck.
我已经尝试过“激活”,还有其他几家没有运气。
Would be also nice to be able to save last subnav transition and redirect to in when click on main nav. 当单击主导航时,能够保存上一个subnav过渡并重定向到in也是很好的。
So it's important to think of the router as a stack. 因此,将路由器视为堆栈非常重要。 As you visit routes you push a route on/off the stack.
当您访问路线时,可以将路线推入/推入堆栈。 An item that is being pushed on or off the stack will have events fired correlating to the transition at hand.
被推入堆栈或从堆栈移出的项目将触发与当前过渡相关的事件。
In your particular case, the current implementation has two issues. 在您的特定情况下,当前的实现有两个问题。 The one issue you've already mentioned, when you pop off children routes the parent route doesn't fire any events.
您已经提到的一个问题是,当您弹出子路线时,父路线不会触发任何事件。 The second issue would occur under these circumstances.
在这种情况下将发生第二个问题。
/workspaces
(it redirects to the first workspace /workspaces/1
) /workspaces
(它将重定向到第一个工作空间/workspaces/1
) /workspaces/2
/workspaces/2
/workspaces/2
(while it's in the afterModel
hook of workspaces it redirects to the first workspace /workspaces/1
) /workspaces/2
上刷新页面(位于工作区的afterModel
挂钩中时,它会重定向到第一个工作区/workspaces/1
) So the easiest way to handle this is to create a child route under the workspaces
route whose sole purpose is to redirect to the first workspace. 因此,处理此问题的最简单方法是在
workspaces
路由下创建子路由,其唯一目的是重定向到第一个工作空间。
this.route('dashboard', function () {
this.route('numbers');
this.route('workspaces', function () {
this.route('first');
this.route('workspace', {path: '/:wid'});
});
Remove the afterModel
logic from the workspaces
route and put it in the workspaces.first
route. 从
workspaces
路由中删除afterModel
逻辑,然后将其放入workspaces.first
路由中。
export default Ember.Route.extend({
redirect: function() {
var first = this.modelFor('workspaces').get('firstObject');
this.transitionTo('dashboard.workspaces.workspace', first);
}
}
Now in your template, instead of ever pointing to workspaces
you would point to workspaces.first
. 现在,在您的模板中,您无需指向
workspaces
,而可以指向workspaces.first
。
{{link-to 'Workspaces' 'dashboard.workspaces.first'}}
Now when you are in the dashboard and click it, it will push on the workspaces
route into the stack execute its hooks. 现在,当您在仪表板中并单击它时,它将把
workspaces
路由推入堆栈中并执行其钩子。 It will then push the first
route onto the stack and execute its hooks. 然后它将
first
条路由推入堆栈并执行其钩子。 The hooks of the first
route will cause it to pop the first
route off the stack and push the workspace
route onto the stack. first
条路线的钩子将使其从堆栈弹出first
条路线,并将workspace
路线推到堆栈上。 When you try to click the workspaces
route again it will pop workspace
off the stack and then push first
back onto the stack which will then again execute its hooks. 当您尝试再次单击
workspaces
路由时,它将使workspace
弹出堆栈,然后first
其推回堆栈,然后再次执行其挂钩。
Example: http://emberjs.jsbin.com/cipawapali/edit?html,js,output 示例: http : //emberjs.jsbin.com/cipawapali/edit?html,js,output
May be a bit late, but for anyone looking for a solution to this empty white page as I was. 可能有点晚了,但是对于任何像我一样正在寻找这种空白页面的解决方案的人。
Ember provides an implicit/hidden route, that can be used instead of creating a new one, which is pretty good for this. Ember提供了一个隐式/隐藏的路由,可以用来代替创建一个新路由,这非常好。 In this question's case it would be
DashboardWorkspacesIndexRoute
, no need to declare it in the router, just add the route file with the redirection you want 在此问题的情况下,它将是
DashboardWorkspacesIndexRoute
,无需在路由器中声明,只需添加具有所需重定向的路由文件
export default Ember.Route.extend({
redirect() {
let first = this.modelFor('workspaces').get('firstObject');
this.replaceWith('dashboard.workspaces.workspace', first);
}
}
You can then use {{link-to 'Workspaces' 'dashboard.workspaces'}}
and it will retain the active
class while still redirecting every time. 然后,您可以使用
{{link-to 'Workspaces' 'dashboard.workspaces'}}
,它将保留active
类,同时仍每次都进行重定向。
For more information, here's the source . 有关更多信息,请参见此处 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.