durandal.router isNavigating property weird error

I use durandal router to show a spinning icon while the page is loading. This is the code that makes it appear or hide itself:

<div data-bind="css: { activeLoader: router.isNavigating }" class="pull-right">
    <i class="fa fa-spinner fa-spin"></i>
</div>

However, I want to put it inside my nav, like this:

<nav class="main-nav">
    <ul data-bind="foreach: router.visibleRoutes">
        <li>
            <a data-bind="attr: { href: hash }, css: { active: isActive }, html: caption"></a>
            <i data-bind="css: { activeLoader: router.isNavigating }" class="fa fa-spinner fa-spin pull-right"></i>
        </li>
    </ul>
</nav>

This throws the message "router is not defined" inside chrome's developer tools console window.

But if I use the first snippet above, everything works fine.

Any ideas?

Solution

That is because you are inside the forEach binding. The scope inside the forEach binding will be a route since you are iterating through the visibleRoutes. What you can do is to use $parent to access parent viewModel like this,

<ul data-bind="foreach: router.visibleRoutes">
        <li>
            <a data-bind="attr: { href: hash }, css: { active: isActive }, html: caption"></a>
            <i data-bind="css: { activeLoader: $parent.router.isNavigating }" class="fa fa-spinner fa-spin pull-right"></i>
        </li>
    </ul>