I'm trying to make a global menu with emberjs. Following these instructions, I have written a controller/navigation.js and a views/navigation.hbs which render a fixed menu defined in the controller.

I then render the navigation template in application.hbs like so:

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        {{render 'navigation'}}
    </div>
</nav>

When I load up the application at the root url, the menu is rendered as it should. However, as soon as I navigate elsewhere (by clicking an element of the menu, for instance), the menu is not rendered anymore, and if I navigate back to the home page later, the navigation menu is not rendered again.

Why isn't this template rendered every time application.hbs is rendered? What steps should I follow to make sure this menu is rendered with the application?

If it is possible, the navigation menu should have its own controller and template, in order to avoid having all that code in the application controller and template.

  • {{partial "navbar"}} {{outlet}} {{partial "footer"}} // application.hbs – kristjan reinhold Nov 30 '15 at 11:40
up vote 2 down vote accepted

The tutorial you are following is very old. For example, views on Ember 2.0 do not exist any more.

If you want a navbar in your whole application, you just need to create it in the application.hbs template by writing it directly or using a component. For example:

//application.hbs
<!-- your html code for your navigation menu -->
{{outlet}}

or

//application.hbs
{{!your component to render your navigation menu}}
{{outlet}}

In {{outlet}} are loaded all the nested routes of the current route. If you use it in the application.hbs, since it is the root path, then the navigation bar will be always visible.

  • I'm currently figuring out how to make up data in the routes/application.js model(), but I'll use components to render it. Thanks! – Gabriel Theron Nov 30 '15 at 13:29

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.