CODEWITHSUNDEEP
knockout.jsnavigationsingle-page-applicationpagerjs
maxfridbe
maxfridbe

Reputation: 5970

Highlight current clickpath in pagerjs and knockout

If you are creating a pagerjs application how can you set active the path that you have open. For instance

<div class="tabs">
    <a data-bind="page-href:'opt1'">opt1</a> | 
    <a data-bind="page-href:'opt2'">opt2</a>
    </div>

<div class="server" data-bind="page:{id:'opt1')}">
                </div>

it would be easy to have a css:{selected:isVisible} binding but what would isVisible look like? It alludes to this in the documentation but does not show what isVisible would look like. Is there something in pagerjs that can be bound to?

Upvotes: 1

Views: 417

Answers (1)

maxfridbe
maxfridbe

Reputation: 5970

I ended up creating a new binding on my VM's

 vm.isCurrentPage = function(pageid){
            var page = pager.page.find(pageid);
            return page.isVisible;
        };

With usage

<a data-bind="page-href:'server/dashboard', css:{selected:isCurrentPage('server')}">Dash</a>

Upvotes: 5

Related Questions