Question

我正在尝试基于此数组（来自coffeescript）生成带有把手的菜单：

Template.moduleHeader.modules = -> [
    { "moduleName": "dashboard", "linkName": "Dashboard" }
    { "moduleName": "roomManager", "linkName": "Raumverwaltung" }
    { "moduleName": "userManager", "linkName": "Benutzerverwaltung" }
]

迭代看起来像这样（来自html代码）：

{{#each modules}}
<li {{this.isActive this.moduleName}}>
    <a class="{{this.moduleName}}" href="#">{{this.linkName}}</a>
</li>
{{/each}}

{{this.isActive}}的定义如下（再次出现coffeescript代码）：

Template.moduleHeader.isActive = (currentModuleName) ->
    if currentModuleName is Session.get 'module'
        "class=active"

基于Session.get 'module'，使用css类激活突出显示相应的菜单项。

在重新加载时，会话变量module包含“仪表板”，这是该阵列中的第一个条目，但是，它没有获得活动 - 类。如果我将一个空对象添加为modules - 数组的第一个项目，则“仪表板”项目会正确突出显示。

奇怪的是，第一个项目（仪表板）渲染得很好，但它没有活动 - 类，这会产生一种印象，即函数this.isActive是没有要求第一项。

我做错了吗？

Answer 1

如果渲染，则每个块都正常工作。 isActive帮助器中必定存在问题。很可能if块没有按你认为的那样工作。将console.log放在那里，查看是否输入，并在if（printf调试）中放入另一个。我发现这通常是快速调试车把助手的最简单方法。

js中用于检查上下文中值的有用帮助程序如下

Handlebars.registerHelper("debug", function(optionalValue) { 
    console.log("Current Context"); 
    console.log("===================="); 
    console.log(this); 
    if (optionalValue) { 
        console.log("Value"); 
        console.log("===================="); 
        console.log(optionalValue); 
    } 
});

然后你可以在每个块中调用它，并查看当前上下文/特定值所具有的所有值。

Answer 2

真的在这里突发奇想，但我的传统方法将在下面。我不知道它是否会起作用但是它太大而无法发表评论，但它又不是一个有保障的解决方案。让我知道它是怎么回事：

用

替换HTML

{{#each modules}}
<li {{isActive}}>
    <a class="{{moduleName}}" href="#">{{linkName}}</a>
</li>
{{/each}}

用

替换CS

Template.moduleHeader.isActive = () ->
    currentModule = this
    currentModuleName = currentModule.moduleName
    if currentModuleName is Session.get 'module'
        "class=active"

#each with helper忽略数组中的第一个条目

2 个答案: