Ustaw element menu nawigacyjnego aktywny w części Kierownica częściowy

Question

Obecnie powtarzam kod dla mojego menu nawigacyjnego na każdej pojedynczej karcie, ale chcę używać częściowych, więc nie ma duplikatu kodu.

To jest to, czego używam (poniżej), z klasą active na innym elemencie listy w zależności od pliku. Zamiast tego chciałbym użyć częściowego {{> fruits-nav}}, ale nie mogę znaleźć żadnych informacji o tym, jak ustawić klasę active w zależności od tego, który plik zawiera częściowy.

<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

można przekazać dane do częściowego więc można to robić w częściowej:

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

a następnie wyciągnij go w ten sposób:

{{> fruits-nav active}} 

i po prostu upewnij active czy ma odpowiednią flagę dla obecnego owocu.

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

Answer 2

myślę, że można nawet zrobić to nieco prostsze i bardziej czytelne:

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

i podczas renderowania:

active: { pineapple: true }