Learning Meteor.js [Part 9]: Adding another page and linking it with FlowRouter

In retrospect, it was too optimistic to start with the 'orders' page (where a user would add ingredients to an order), instead I should have started with the much simpler 'ingredients' page. Let's switch to develop that page instead. Adding another page is mechanical:

1. Add the page in the UI directory with the markup and the code behind file.
2. Add a new route to render the layout with the new page.

To create navigation between the pages I used the flow-router-helpers package. After installing it, I exposed the routes to the view model of the main layout:

Template.mainLayout.helpers({
    navItems() {
        return FlowRouter._routes;
    }
});

Not sure if the '_routes' property is meant to be public but I did not found an alternative without the underscore prefix. Anyway, next consume the routes from the markup:

{{#each navItems}}
  <li class="{{isActiveRoute name}}">
    <a href="{{pathFor name}}">{{options.displayName}}</a>
  </li>
{{/each}}

Things to note are the 'pathFor' and 'isActiveRoute' helper methods, they are all included in the helpers package and quite useful to build the links in the UI.

Yay! We have another page with nice top level navigation menu, that wasn't too hard. You can follow the code along by using this repo tag or visit the live demo.