CODEWITHSUNDEEP
javascriptember.jsember-data
Mohamad Zein
Mohamad Zein

Reputation: 777

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

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

Upvotes: 0

Views: 1169

Answers (1)

vinay pandey
vinay pandey

Reputation: 133

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

Upvotes: 2

Related Questions