ハンドルバー部分でナビゲーションメニュー項目を有効にする

Question

現在、すべてのタブでナビゲーションメニューのコードを繰り返していますが、部分コードを使用してコードが重複しないようにしたいと思います。

これは私が使用しているもので、activeクラスはファイルによって異なるリスト要素にあります。代わりに、私は部分{{> fruits-nav}}を使用したいと思いますが、どのファイルが部分的に含まれているかによって、activeクラスをどのように設定するかに関する情報は見つかりません。

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

をし、このようにそれを引っ張っ：：

{{> fruits-nav active}} 

とちょうどactiveを確認して、あなたの部分でこれを行うことができますので

<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

あなたは部分的にデータを渡すことができます現在の果物に適切なフラグが設定されています。

デモ：http://jsfiddle.net/ambiguous/GesND/

Answer 2

私はあなたにもそれが少し簡単でより読みやすくすることができると思います。

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

とレンダリング中：

active: { pineapple: true }