Ember: How to access another model data in a dynamic segment template

Question

In a dynamic segment template, how do you display data from a model using the route ?

so for example I have those three routes with phone_id as dynamic segment

Router.map(function() {
  this.route('phones');
  this.route('phone', {path: 'phones/:phone_id'});
  this.route('numbers');
});

in phones/:phone_id template, I am trying to show all the numbers model. so in phone.js route, I tried to return the number model and output it but it showed nothing.

import Ember from 'ember';

export default Ember.Route.extend({

  numbers(){
    return this.get("store").findAll('number')
  }

});

I tried it also with the params.phone_id as argument but it did not work. (no error was shown also).

the template phone.hbs looks like

<h5> Device Id: {{model.device_id}}</h5>


{{#each numbers as |number|}}
{{number.digits}}
{{/each}}

funny thing is model.device_id returns the correct one even though I did not even set it to return that in phone.js route. But the each loop for numbers which I did implement something for does not return anything.

Is there a workaround to return number model data in phone.hbs dynamic segment template ?

EDIT:

the way I am reaching my dynamic segment is through a link to:

{{#each phones as |phone|}}
    <li>{{#link-to 'phone' phone}} {{phone.id}}{{/link-to}}</li>
{{/each}}

vinay pandey vinay pandey · Accepted Answer · 2016-08-01T05:12:13

Only object from returned from model hook of route is set as model of controller.

if you want to use numbers as it is in template then write it as a computed property in controller.

numbers:Ember.computed(function(){
  return this.store.findAll('number');
});

or you can set these properties in model itself

so model hook of your route will look like this

model:function(params){
 return Ember.RSVP.hash({
   phone: this.store.findRecord('phone',params.phone_id),
   numbers: this.store.findAll('number')
 });
}

after this you will get two properties in your model

Now your template will look like this

<h5> Device Id: {{model.phone.device_id}}</h5>


{{#each model.numbers as |number|}}
{{number.digits}}
{{/each}}

Ember: How to access another model data in a dynamic segment template

1 Answers