Imposta la voce di menu di navigazione attiva in Handlebars parziale

Question

Attualmente, sto ripetendo il codice per il menu di navigazione su ogni singola scheda, ma voglio usare partial, quindi non c'è codice duplicato.

Questo è quello che sto usando (sotto), con la classe active su un elemento di lista diverso a seconda del file. Invece, mi piacerebbe utilizzare un parziale {{> fruits-nav}}, ma non riesco a trovare alcuna informazione su come impostare la classe active a seconda del file che include il parziale.

<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

È possibile passare i dati ad un parziale di modo da poter fare questo nel vostro parziale:

<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> 

e poi tirare in questo modo:

{{> fruits-nav active}} 

e solo assicurarsi active ha il flag appropriato per il frutto corrente.

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

Answer 2

penso che si può anche fare leggermente più semplice e più leggibile:

<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> 

e durante il rendering:

active: { pineapple: true }