CODEWITHSUNDEEP
ember.jspathroutes
Ilessa
Ilessa

Reputation: 622

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

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:

I'm using ember 2.5.0. Thanks.

Upvotes: 1

Views: 2701

Answers (2)

Panman
Panman

Reputation: 1167

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);
    }
  }
});

Upvotes: 2

Panman
Panman

Reputation: 1167

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>

Upvotes: 2

Related Questions