Pages that only toggle on

Using urlToggle: 'show' you can specify that a page will display as normal, but not be automatically hidden when navigating away. This can be useful when you want URLs that can toggle on multiple sub-pages at the same time. These pages can later be hidden using $page.hideElementWrapper().

The css class is data bound using the method pager.Page.prototype.child(String) that returns and observable to the page-instance. If the page is visible the css class active is applied.

<ul class="nav nav-tabs">
    <li data-bind="css: {active: $page.child('psy')().isVisible}"><a href="#!/view/url_toggle_show/psy">Psy</a></li>
    <li data-bind="css: {active: $page.child('lmfao')().isVisible}"><a href="#!/view/url_toggle_show/lmfao">LMFAO</a></li>
    <li data-bind="css: {active: $page.child('miikesnow')().isVisible}"><a href="#!/view/url_toggle_show/miikesnow">Miike Snow</a></li>
</ul>

The pages are configured using urlToggle: 'show'.

<div data-bind="page: {id: 'psy', urlToggle: 'show'}" class="well">
    <a style="float: right" href="#!/view/url_toggle_show" data-bind="click: closePage($page)"><i class="icon-eject"></i></a>
    <iframe width="560" height="315" src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
</div>

<div data-bind="page: {id: 'lmfao', urlToggle: 'show'}" class="well">
    <a style="float: right" href="#!/view/url_toggle_show" data-bind="click: closePage($page)"><i class="icon-eject"></i></a>
    <iframe width="560" height="315" src="http://www.youtube.com/embed/KQ6zr6kCPj8" frameborder="0" allowfullscreen></iframe>
</div>

<div data-bind="page: {id: 'miikesnow', urlToggle: 'show'}" class="well">
    <a style="float: right" href="#!/view/url_toggle_show" data-bind="click: closePage($page)"><i class="icon-eject"></i></a>
    <iframe width="560" height="315" src="http://www.youtube.com/embed/mVWeqAPQUXc" frameborder="0" allowfullscreen></iframe>
</div>