javascript - 在 Handlebars 部分设置导航菜单项处于活动状态

Question

目前，我在每个选项卡上重复我的导航菜单的代码，但我想使用部分代码，所以没有重复的代码。

这就是我正在使用的（下），active根据文件，不同的列表元素上的类。相反，我想使用 partial {{> fruits-nav}}，但我找不到任何关于如何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

您可以将数据传递给部分，以便您可以在部分中执行此操作：

<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他为当前水果设置了适当的标志。

演示：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 }