在车把部分中设置导航菜单项为活动状态

Set navigation menu item active in Handlebars partial

本文关键字：导航 菜单项 活动状态 设置      更新时间：2023-09-26

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

这就是我正在使用的(下面)，根据文件，active类在不同的列表元素上。相反，我想使用部分{{> 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>

我认为你甚至可以使它更简单，更易于阅读:

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

你可以将数据传递给一个局部，所以你可以在你的局部中这样做:

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

相关文章：