0

I'm only a couple days into learning assemble and I am attempting to create a table of contents using a partial.

toc.hbs

<ul >
{{#each  pages }}
    <li>
        <a  href ="{{assets }}/{{basename }}.html" >{{data.title }}</a >
    </li >
{{/each  }}
</ul >

layout.hbs

<div class="row">
    <div class="col-sm-3">
        {{> toc}}
    </div>
    <div class="col-sm-9">
        {{> body}}
    </div>
</div>

This works fine except I'd like to set class="active" on the current page.

Q: Is there a way to easily do this using the built-in functionality of assemble & handlebars? Do I need to use a helper like ifCond?

Community
  • 1
  • 1
jt000
  • 3,196
  • 1
  • 18
  • 36
  • possible duplicate of [How do I identify the current page in a page collection?](http://stackoverflow.com/questions/21630251/how-do-i-identify-the-current-page-in-a-page-collection) – jt000 Mar 24 '15 at 22:41

2 Answers2

1

You can use the {{#is}} and {{/is}} block to conditionally add the style.

<li {{#is title "Features"}}class="active"{{/is}}>
  <a href="features.html">Features</a>
</li>

You could do the comparison on basename or other fields if you don't think title is stable enough.

James
  • 11,721
  • 2
  • 35
  • 41
0

After a bit of playing around I finally discovered the {{debug}} helper which prints out the entire context to the console. From this I discovered that there's an undocumented property isCurrentPage, which returns true when the page is the current one being processed.

Result:

<ul >
{{#each  pages }}
    <li {{#if isCurrentPage}}class="active"{{/if}}>
        <a href ="{{assets }}/{{basename }}.html" >{{data.title }}</a >
    </li >
{{/each  }}
</ul >
jt000
  • 3,196
  • 1
  • 18
  • 36
  • After searching for isCurrentPage, I discovered this question is a dupe of http://stackoverflow.com/questions/21630251/how-do-i-identify-the-current-page-in-a-page-collection – jt000 Mar 24 '15 at 22:41