Ember.js 2,transitionTo在第一级路由中使用多个动态段

时间:2017-07-26 16:18:18

标签: javascript ember.js ember-data transition ember-cli

我使用的是Ember> = 2.13.x。

我需要使用路由操作中的transitionTo进入另一条路线。

以下是演示余烬: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
});

路由/ application.js中

actions: {
    goToPost() {
        let post = this.store.findRecord('post', 1);
        this.transitionTo('post', post);
    }
}

路由/ 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 };
}

模板/ application.hbs

<button type="button" {{action 'goToPost'}}>GoToPost with action (transitionTo)</button>

所以,当我点击一切按预期工作时。

我在应用程序操作中获取模型,然后使用this.transitionTo('post', post);

在我的post路线中,我有serialize(),我现在读到,当动态细分存在时,它用于网址合成。

我的问题:我正确使用它吗?

为什么我不能使用这样的内容: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()方法解决此问题。 这是正确的方法吗?

1 个答案:

答案 0 :(得分:0)

您不需要覆盖serialize hook,默认情况下,您将获得路由模型钩子参数中的动态段和queryParams。

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之类的相应前缀,以便轻松区分网址。

如果希望transitionTo调用模型钩子,那么在参数中提供对象或模型总是提供所需的参数可能是字符串或数字。 请参阅:https://guides.emberjs.com/v2.14.0/routing/defining-your-routes/#toc_dynamic-segments