javascriptember.jsember.js-2

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


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.


Solution

  • 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!