Passing additional, bindable data to an Aurelia route

Aurelia provides a built-in router that makes it very easy not only to define routes for the many pages your application might have, but also to automatically generate a navigation bar with your defined routes.

For instance, given the routes:

config.map([  
    { 
        route: ["","welcome"], 
        moduleId: "welcome", 
        nav: true, 
        title: "Welcome"
    },
    { 
        route: "about",
        moduleId: "about",   
        nav: true, 
        title: "About"
    }
]);

We would generate our navigation bar simply by iterating through every route we've configured and binding to its properties:

<div class="nav">  
    <ul>
        <li repeat.for="entry of router.navigation">
            <a href.bind="entry.href">${entry.title}</a>
        </li>
    </ul>
</div>  

This would generate out navigation bar as expected:

<div class="nav">  
    <ul>
        <li>
            <a href="/">Welcome</a>
        </li>
        <li>
            <a href="/about">About</a>
        </li>
    </ul>
</div>  

Nothing too exciting but very, very handy. But what if we wanted to, for instance, give each link in our navigation bar a different css class? Thankfully, Aurelia's got this covered too.

Defining route settings

Aurelia supports defining extra settings for a route through a settings property; this property will be propagated to the navigation model, which means we'll be able to use it inside the repeat.for that generates the navigation bar:

{ 
    route: ["","welcome"], 
    moduleId: "welcome", 
    nav: true, 
    title: "Welcome", 
    settings: {  /* put any additional info you need here */ } 
}

So, this is what the new route definitions might look like now:

config.map([  
    { 
        route: ["","welcome"], 
        moduleId: "welcome", 
        nav: true, 
        title: "Welcome", 
        settings: { linkClass: "home" }
    },
    { 
        route: "about",
        moduleId: "about",   
        nav: true, 
        title: "About",         
        settings: { linkClass: "about" }  
    }
]);

Note that it doesn't matter what you call the properties inside the settings object; you just need to use the same name when binding the navigation bar to the router.

And, to use this on our nav bar, we can just bind settings.linkClass like we would with any of the standard properties:

<a href.bind="entry.href" class.bind="entry.settings.linkClass">  
    ${entry.title}
</a>  

This will now generate each link with the appropriate css class.

<div class="nav">  
    <ul>
        <li>
            <a href="/" class="home">Welcome</a>
        </li>
        <li>
            <a href="/about" class="about">About</a>
        </li>
    </ul>
</div>  

And that's one of the thnigs I love about Aurelia: it's like the good folks over there not only have already thought of every possible thing you might need or want to use, but also have found the cleanest and most friction-less way for you to use and implement it.

Do you have any questions or remarks? Let us know in the comments!