Reroute to the first child page if none are visible in pager.js

Question

Is it possible to automatically reroute a page to the first child if none of the current page's children are visible? The scenario is that I'm building a series of tabbed content areas and I am controlling the routing via Knockout and Pager.js. What I would like is if one tab content area has child tabs the route should automatically adjust to show that first child as active. I'm not able to just set that child page with the 'start' role because I can't guarantee the first child will always be the same.

I've created a basic fiddle showing the architecture:

http://jsfiddle.net/ePY3C/2/

<div id="myApp">
<div data-bind="page: { id: 'start', role: 'start' }">
    <ul class="nav nav-tabs" data-bind="foreach: $page.children">
        <li data-bind="css: {active: isVisible}"><a data-bind="text: $data.val('title'), page-href: $data"></a></li>
    </ul>
    <div data-bind="page: { id: 'page-one', title: 'Page One' }">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, quae totam illum eaque reiciendis incidunt tempore alias a possimus laboriosam dolorum officia assumenda fugit quo tenetur voluptas recusandae labore culpa.</p>
    </div>
    <div data-bind="page: { id: 'page-two', title: 'Page Two' }">
        <p>Suscipit, quibusdam, ex rerum quae minus ullam esse aliquam non nihil officia! Doloribus expedita veritatis porro quae quos ad ex dolorum minus temporibus facilis. Quia, ipsum officia ullam perferendis minima?</p>
    </div>
    <div data-bind="page: { id: 'page-three', title: 'Page Three' }">
        <p>Tempora, similique laborum quas eos ullam sit consequatur tenetur corrupti quod dolore! Porro, ex, architecto, pariatur perspiciatis a itaque velit illo autem rem nihil error minima minus alias nostrum enim?</p>
    </div>
    <div data-bind="page: { id: 'page-four', title: 'Page Four' }">
        <p>Doloribus, dolore, eligendi, vitae vero fugiat accusantium ex error eum qui enim molestiae labore dignissimos aperiam quis suscipit placeat unde consequatur ipsum eos in sed dolorem officia consequuntur nihil mollitia.</p>
    </div>
    <div data-bind="page: { id: 'page-five', title: 'Page Five' }">
        <p>Dolor, quo quis voluptates suscipit velit harum totam officiis quisquam quia perspiciatis amet aspernatur tempore magnam. Eos, in, vel similique temporibus dolores animi neque delectus sunt blanditiis voluptatem nisi cum!</p>
    </div>
</div>

What the result should be is that it automatically routes to the child page with the route id of 'page-one'.

Answer 1

One way to solve it would be to use role: 'start' multiple times. See this JsFiddle.