Ember.js2、transitionTo在一级路由中使用多个动态段
Ember.js 2, transitionTo using multiple dynamic segments in first level route
我正在使用 Ember >= 2.13.x.
我需要使用 transitionTo
从路线动作进入另一条路线。
这是演示 ember-twiddle: https://ember-twiddle.com/3cbb806f31f8d71a6c414452f4fc9ded
我遇到这种情况:
router.json:
Router.map(function() {
this.route('home', {path: '/'});
this.route('categories', {path: 'categories'});
this.route('category', {path: ':category_id'});
this.route('posts', {path: 'posts'});
this.route('post', {path: ':category_id/:post_id'}); //I have multiple synamic segments in here
});
routes/application.js:
actions: {
goToPost() {
let post = this.store.findRecord('post', 1);
this.transitionTo('post', post);
}
}
routes/post.js:
model(params) {
return this.store.findRecord('post', params.id);
},
serialize(model) {
console.log('model in serialize():', model);
return { category_id: model.get('category.id'), post_id: model.id };
}
templates/application.hbs:
<button type="button" {{action 'goToPost'}}>GoToPost with action (transitionTo)</button>
所以当我点击时,一切都按预期工作。
我在应用程序操作中获取模型,然后使用 this.transitionTo('post', post);
。
在我的 post
路线中,我有 serialize()
,我现在读到,当存在动态段时,它用于 URL 合成。
我的问题:我的使用方法正确吗?
为什么我不能使用这样的东西:this.transitionTo('post', post.category.id, post.id);
并让 model()
在 post
路由中获取模型(从数据库或商店)?
我也尝试使用 this.transitionTo('post', {category_id: post.category.id, post_id: post.id});
但显然 post
路由 model()
没有加载任何东西,因为它真的认为对象已经存在。
所以,我只能用serialize()
方法来解决这个问题。 这样的方法对吗?
您无需覆盖序列化挂钩,默认情况下您将在路由模型挂钩参数中获取动态段和查询参数。
model({post_id,category_id}) {
return this.store.findRecord('post', post_id);
}
这是twiddle
this.route('category', {path: 'category/:category_id'});
this.route('post', {path: 'post/:category_id/:post_id'});
我更喜欢添加相应的前缀,例如post
,这样URL就变得容易区分了。
如果你想transitionTo
调用模型钩子,那么在参数中提供对象或模型始终提供所需的参数,可以是字符串或数字。
参考:https://guides.emberjs.com/v2.14.0/routing/defining-your-routes/#toc_dynamic-segments
我正在使用 Ember >= 2.13.x.
我需要使用 transitionTo
从路线动作进入另一条路线。
这是演示 ember-twiddle: https://ember-twiddle.com/3cbb806f31f8d71a6c414452f4fc9ded
我遇到这种情况:
router.json:
Router.map(function() {
this.route('home', {path: '/'});
this.route('categories', {path: 'categories'});
this.route('category', {path: ':category_id'});
this.route('posts', {path: 'posts'});
this.route('post', {path: ':category_id/:post_id'}); //I have multiple synamic segments in here
});
routes/application.js:
actions: {
goToPost() {
let post = this.store.findRecord('post', 1);
this.transitionTo('post', post);
}
}
routes/post.js:
model(params) {
return this.store.findRecord('post', params.id);
},
serialize(model) {
console.log('model in serialize():', model);
return { category_id: model.get('category.id'), post_id: model.id };
}
templates/application.hbs:
<button type="button" {{action 'goToPost'}}>GoToPost with action (transitionTo)</button>
所以当我点击时,一切都按预期工作。
我在应用程序操作中获取模型,然后使用 this.transitionTo('post', post);
。
在我的 post
路线中,我有 serialize()
,我现在读到,当存在动态段时,它用于 URL 合成。
我的问题:我的使用方法正确吗?
为什么我不能使用这样的东西:this.transitionTo('post', post.category.id, post.id);
并让 model()
在 post
路由中获取模型(从数据库或商店)?
我也尝试使用 this.transitionTo('post', {category_id: post.category.id, post_id: post.id});
但显然 post
路由 model()
没有加载任何东西,因为它真的认为对象已经存在。
所以,我只能用serialize()
方法来解决这个问题。 这样的方法对吗?
您无需覆盖序列化挂钩,默认情况下您将在路由模型挂钩参数中获取动态段和查询参数。
model({post_id,category_id}) {
return this.store.findRecord('post', post_id);
}
这是twiddle
this.route('category', {path: 'category/:category_id'});
this.route('post', {path: 'post/:category_id/:post_id'});
我更喜欢添加相应的前缀,例如post
,这样URL就变得容易区分了。
如果你想transitionTo
调用模型钩子,那么在参数中提供对象或模型始终提供所需的参数,可以是字符串或数字。
参考:https://guides.emberjs.com/v2.14.0/routing/defining-your-routes/#toc_dynamic-segments