Ember.js 2, transitionTo using multiple synamic segments in first level route

I’m using Ember >= 2.13.x.

I need to use transitionTo from a route action to go in another route.

Here is the demo ember-twiddle: Ember Twiddle

I have this situation:

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>

So when I click everything works as expected.

I fetch the model in application action and then I use this.transitionTo('post', post);.

In my post route then I have serialize() which, I read now, is using for URL composition when dynamic segments are present.

My question: I’m using it the right way?

Why I cannot use something like this: this.transitionTo('post', post.category.id, post.id); and let model() in post route fetch the model (from DB or store)?

I also tried to use this.transitionTo('post', {category_id: post.category.id, post_id: post.id}); but obviously the post route model() doesn’t load anything because it really thinks the object is already there.

So, I can fix this problem with serialize() method only. Is it the right way?

@johnunclesam I just did some tests and it should work how you want it. I’m guessing you may have a syntax error somewhere. I will point out that when you said this.transitionTo('post', post.category.id, post.id); above, you should be using post.get('category.id') so if that was your actual code maybe the issues is something along those lines.

I’ll paste in the code I just wrote and you can take a look, basically I made a new route called “junk” with two dynamic segments, ds1 and ds2:

// router.js
...
  this.route('junk', { path: '/junk/:ds1/:ds2'});
...

This is the route:

// routes/junk.js
export default Ember.Route.extend({
  model: function(params){
    return Ember.RSVP.hash({
      ds1: params.ds1,
      ds2: params.ds2
    });
  },

  actions: {
    gotoRoute: function() {
      this.transitionTo('junk', "apple", "banana");
    }
  }
});

This is the template, with a link-to and an action that uses the transitionTo to accomplish the same thing:

<h2>{{model.ds1}}  -- {{model.ds2}}</h2>

<h4>{{#link-to 'junk' "apple" "banana"}}go to apple banana{{/link-to}}</h4>
<h4><button {{action "gotoRoute"}}>Go to apple banana</button></h4>

If I start at http://localhost:4200/#/junk/monkey/dolphin I get the following: 50 AM

And then if I click the button (thus triggering the action and the transitionTo I get this: 00 AM

So essentially everything works as you’d expect. I’d guess you’re running into a syntax problem somewhere, perhaps in your route definition or your transitionTo?

1 Like