How to access data from routes in an Ember application template?

Question

I'm following along the docs for Ember 2.3 and can't seem to find anywhere something very basic: how does one access a value provided by the route's 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 it is now, the navigation object is accessible to the route's template (client.hbs) but not to the application template.

Answer 1

Here's how it's done (unless ember comes up with a better way in future releases):

routes/client.js

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

Thanks, Ivan, for the answer!

Answer 2

How does one access a value provided by the route's model hook inside the main template

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

Meaning you can just use the property model in your 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
})

Which means you can now use navigation instead of model.navigation inside you template. Another way could be to add an alias inside your controller for the model property:

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

Which will allow you as well to use navigation instead of model.navigation.

However, if you want to have some sort of global navigation in your application, the better way would be to use a Service which you would inject into any controller that needs navigation. Something like:

// 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 inject it in your controllers:

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

And now you have access to navigation in that controller's template as well.

Answer 3

I would resolve this issue like this. Create a navigation component which accepts custom parameters.

Templates application.hbs

{{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're dealing with static arrays as navigations

then no resolving is needed and would be simply to out put the binded 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' }]

And really model hook should contain data that is retrieved from server. Otherwise use setupController hook.

setupController: function(controller, model) {
        this._super(controller, model);

        controller.setProperties({
            nav: []
        });

Answer 4

I recently needed to solve this problem and this is how I did it.

First, this is what I have in my application.hbs template:

`    <!-- app/templates/application.hbs -->
<div class="page">
     {{!-- Main site navigation menu --}}
     {{app-navbar isHidden=hidesNavbar}}
         {{!-- Site content overrides this block --}}
         {{outlet}}
     {{!-- Main site footer --}}
     {{app-footer isHidden=hidesFooter}}
</div>`

In my app, app-navbar and app-footer are both components that know how to use the isHidden property to either make themselves visible or invisible. There are different ways of toggling visibility but for the sake of brevity, let's just wrap the contents of either component inside a conditional block like so:

`<!-- app-navbar and app-footer -->
{{#unless isHidden}} 
     <!-- component HTML here --> 
{{/unless}}
`

Now, from the route where I don't want to see either app-navbar or app-footer, in my case this is login.js, I can call setupController() and toggle the hidesNavbar and hidesFooter properties of the application controller. Looks something like this:

`// app/routes/login.js
import Route from '@ember/routing/route';
export default Route.extend({
    setupController() {
      this.controllerFor('application').set('hidesNavbar', true);
      this.controllerFor('application').set('hidesFooter', true);
    }
});`

Now, whenever we transition to the login route the hidesNavbar and hidesFooter properties get set on the application controller making the isHidden properties in the app-navbar and app-footer both true.