Configure the navigation menu item in the parceller

Question

I am currently repeating the code for my navigation menu on each individual tab, but I want to use partial files so that there is no duplicate code.

This is what I use (below), with the class active in another list item depending on the file. Instead, I would like to use partial {{> fruits-nav}} , but I cannot find any information on how to set the class active depending on which file the partial includes.

 <div id="table-nav-tabs"> <ul class="nav nav-tabs"> <li class="apple"><a href="{{id}}">apple</a></li> <li class="active orange"><a href="{{id}}">orange</a></li> <li class="mango"><a href="{{id}}">mango</a></li> <li class="pineapple"><a href="{{id}}">pineapple</a></li> </ul> </div> 

Answer 1

You can pass data in partial to do this in partial:

 <div id="table-nav-tabs"> <ul class="nav nav-tabs"> <li class="{{#if active_apple}}active{{/if}} apple"><a href="{{id}}">apple</a></li> <li class="{{#if active_orange}}active{{/if}} orange"><a href="{{id}}">orange</a></li> <li class="{{#if active_mango}}active{{/if}} mango"><a href="{{id}}">mango</a></li> <li class="{{#if active_pineapple}}active{{/if}} pineapple"><a href="{{id}}">pineapple</a></li> </ul> </div> 

and then pull it like this:

 {{> fruits-nav active}} 

and just make sure that active has the appropriate flag for the current fetus.

Demo: http://jsfiddle.net/ambiguous/GesND/

Answer 2

I think you can even make it a little simpler and clearer:

 <div id="table-nav-tabs"> <ul class="nav nav-tabs"> <li class="{{#if active.apple}}active{{/if}} apple"><a href="{{id}}">apple</a></li> <li class="{{#if active.orange}}active{{/if}} orange"><a href="{{id}}">orange</a></li> <li class="{{#if active.mango}}active{{/if}} mango"><a href="{{id}}">mango</a></li> <li class="{{#if active.pineapple}}active{{/if}} pineapple"><a href="{{id}}">pineapple</a></li> </ul> </div> 

and when rendering:

 active: { pineapple: true }