How can I get the Id from the URL in an Ember Route?

1
votes

I have a two panel display where I show a list of items on the left, then detail about a selected item on the right (using nested route).

My route looks like this:

Router.map(function() {
 this.route('authenticated', {path: '/'}, function() {
  this.route('bakery', function() {
   this.route('cakes', function() {
    this.route('detail', { path: '/:id' });
    });
  });
});
});

My URL looks like
http://localhost:3333/bakery/cakes/e34b3ce3

When an item is selected, it is set to "active" (temporary property on the model - default is false) and highlighted via an action on the bakery/cakes route. The detail is then shown on the right.

If I refresh the page, the item is no longer highlighted - but the detail is still shown.

Ideally I'd like to use the afterModel() hook in the bakery/cakes route to set that item back to active again, but I've been unable to get the Id to be able to do this.

I've tried the following:

  • Accepted answer from here

  • This question doesn't help me as the model will have reloaded and my "active" property will be false so I can't just select where active = true.

I'm using ember 2.5.0. Thanks.

2
ember.jspathroutes
In details route , you can try beforeModel(transition){ //you can access using transition.params.details.id with proper check } – Ember Freak
is there a way I can access that from the cakes route? – Ilessa
I am not sure, please give it try in cakes route model hook. – Ember Freak
No that doesn't work in cakes, as in before model, detail route hasn't loaded, but has loaded by after model. Trying to get the correct object out of transition.params is causing the issue as I'm seeing the following objects: - application - authenticated - authenicated.bakery - authenticated.bakery.cakes - authenticated.bakery.cakes.detail – Ilessa
authenticated.bakery.cakes.detail object does have the id as a property, just getting it out of the transition.params object is causing me issue – Ilessa

2 Answers

2
votes

I wonder if it'd be better to architect your structure a bit differently (from what I assume you're doing).

First, load all of the cakes on the authenticated.bakery.cakes route;

import Ember from 'ember';
export default Ember.Route.extend({
  model() {
    return this.store.findAll('cakes');
  }
});

Secondly, show your "full width" cakes list on the authenticated.bakery.cakes.index template (the cake models will be inherited);

<div class="full width cake list">
  {{#each model as |cake|}}
    {{#link-to "authenticated.bakery.cakes.detail" cake.id}}
      {{!-- cake photo --}}
      {{cake.name}}
      {{!-- other cake details... --}}
    {{/link-to}}
  {{/each}}
</div>

Next, on your authenticated.bakery.cakes.detail route, load the specific cake along with the list of cakes;

import Ember from 'ember';
export default Ember.Route.extend({
  model(params) {
    let cakes= this.modelFor('authenticated.bakery.cakes');
    return Ember.RSVP.hash({
      cakes: cakes,
      cake: cakes.findBy('id', params.id)
    });
  }
});

Finally on the authenticated.bakery.cakes.detail template, show the condensed/narrow list of cakes along with the specific cake details. And using {{link-to}}, the 'active' class will automatically be applied;

<div class="narrow width cake list">
  {{#each model.cakes as |cake|}}
    {{#link-to "authenticated.bakery.cakes.detail" cake.id}}
      {{cake.name}}
    {{/link-to}}
  {{/each}}
</div>

<div class="cake details">
  {{model.cake.name}}
</div>
2
votes

As another option, change your model active flag on the proper route hooks should work. (I think anyway, haven't done this myself.) On your authenticated.bakery.cakes.detail route;

import Ember from 'ember';
export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('cakes', params.id);
  },
  afterModel(cake) {
    cake.set('active', true);
  },
  actions: {
    willTransition() {
      this.get('controller.model').set('active', false);
    }
  }
});