javascript 在 Handlebars 部分中设置导航菜单项处于活动状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17050253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set navigation menu item active in Handlebars partial
提问by theintellects
Currently, I am repeating code for my navigation menu on every single tab, but I want to use partials so there's no duplicate code.
目前，我在每个选项卡上为我的导航菜单重复代码，但我想使用部分代码，因此没有重复的代码。
This is what I am using (below), with the activeclass on a different list element depending on the file. Instead, I'd like to use a partial {{> fruits-nav}}, but I can't find any information on how I would set the activeclass depending on which file is including the partial.
这就是我正在使用的（如下），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>
采纳答案by mu is too short
You can pass data to a partial so you can do this in your partial:
您可以将数据传递给部分，以便您可以在部分中执行此操作：
<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>
and then pull it in like this:
然后像这样把它拉进去：
{{> fruits-nav active}}
and just make sure activehas he appropriate flag set for the current fruit.
并确保active为当前水果设置了适当的标志。
回答by Flaudre
I think you can even make it slightly simpler and more readable:
我认为你甚至可以让它更简单，更易读：
<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>
and while rendering:
并在渲染时：
active: { pineapple: true }
