Question

目前，我在每个标签页上重复导航菜单的代码，但我想使用部分内容，因此没有重复的代码。

这就是我正在使用的（下面），active类在不同的列表元素上，具体取决于文件。相反，我想使用部分{{> fruits-nav}}，但我无法找到有关如何设置active类的任何信息，具体取决于哪个文件包含部分文件。< / p>

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

和渲染时：

active: { pineapple: true }

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>

然后像这样把它拉进去：

{{> fruits-nav active}}

并确保active为当前水果设置了适当的标志。

演示：http://jsfiddle.net/ambiguous/GesND/

在Handlebars partial中设置激活的导航菜单项

2 个答案: