0

我正在尝试基于此数组（来自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}}是这样定义的（再次咖啡脚本代码）：

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

基于Session.get 'module'适当的菜单项突出显示与 css 类active。

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

奇怪的是，第一项（仪表板）渲染得很好，但它没有activethis.isActive类，这让人印象深刻，即没有为第一项调用该函数。

我做错了吗？

4

2 回答 2

0

如果它的渲染，每个块都正常工作。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); 
    } 
});

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

于 2013-05-13T22:06:43.007 回答
0

在这里真的是一时兴起，但我的传统方法如下。我不知道它是否会起作用，但它对于评论来说太大了，但它又不是一个有保证的修复。让我知道事情的后续：

将 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"
于 2013-05-14T08:05:58.073 回答