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>