How to access data from routes in the Ember app template?

Question

I am following the docs for Ember 2.3 and can't find anything simpler: how to access the value provided by the route model hook inside the main template: application.hbs?

routes / client.js

// ... export default Ember.Route.extend({ model() { return { navigation: [ { title: "Projects", link: "projects" }, { title: "My Specifications", link: "specs" } ] } } }); 

Templates / application.hbs

 <nav> {{#each navigation as |navItem|}} <li>{{#link-to navItem.link}} {{navItem.title}} {{/link-to}}</li> {{/each}} </nav> {{outlet}} 

As now, the navigation object is available for the route template (client.hbs), but not to the application template.

Answer 1

Here's how to do it (unless ember uses the best method in future releases):

routes / client.js

 // ... export default Ember.Route.extend({ setupController() { this.controllerFor('application').set('navigation', ["nav1", "nav2"]); } }); 

Thank you, Ivan, for the answer!

Answer 2

How to access the value provided by the route model hook inside the main template

By default, inside the setupController route hook, Ember will set the model property on your controller to the allowed value of the promise returned from the route model hook.

Meaning, you can use the model property in a template to access model.navigation :

 <nav> {{#each model.navigation as |navItem|}} <li>{{#link-to navItem.link}} {{navItem.title}} {{/link-to}}</li> {{/each}} </nav> 

If you want to use a different name, you can override the setupController hook and set the name yourself:

 export default Ember.Route.extend({ // ... setupController(controller, model) { this.set('navigation', Ember.get(model, 'navigation')); } // ... rest of the code }) 

This means that now you can use navigation instead of model.navigation inside the template. Another way is to add alias to your controller for the model property:

 export default Ember.Controller.extend({ navigation: Ember.computed.alias('model.navigation') // ... rest of the code }) 

This will allow you to use navigation instead of model.navigation .

However, if you want to have some kind of global navigation in your application, the best way would be to use the Service that you enter into any controller that needs navigation. Sort of:

 // app/services/navigation.js export default Ember.Service.extend({ items: null, init() { this._super(...arguments); this.set('items', [{ title: "Projects", link: "projects" }, { title: "My Specifications", link: "specs" }]); } }); 

And then enter it into your controllers:

 export default Ember.Controller.extend({ navigation: Ember.service.inject() }); 

You now have access to navigation in this controller template.

Answer 3

I would solve this problem as follows. Create a navigation component that accepts custom parameters.

Application.hbs templates

 {{custom-navigation url=apiURL user=user}} 

Now in your client.js

 apiURL: 'navigations/client' 

And your custom component custom-navigation.js

 resolvedRouteNavs: function() { return DS.PromiseArray.create({ promise: store.query(this.get('url'), { user? : userID?? }); }) }.property('apiURL') 

And custom-navigation.hbs.

 {{#each resolvedRouteNavs as |navItem|}} {{navItem.name}} {{/each}} 

If you are dealing with static arrays like navigation

then no permission is required, and it would just exit the marked array, which is different for each route.

client.js

 navs: [{ name: '1', route: 'foo'}, { name: '2', route: 'bar' }] 

some-different-place.js

 navs: [{ name: 'blah', route: 'foo.bar'}, { name: 'meh', route: 'bar.foo' }] 

Indeed, the model hook must contain data that is retrieved from the server. Otherwise use hookController.

 setupController: function(controller, model) { this._super(controller, model); controller.setProperties({ nav: [] });