#each與呼叫幫手忽略陣列

我試圖產生與車把上的菜單，基於此數組（從CoffeeScript中）的第一個條目：#each與呼叫幫手忽略陣列

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包含「儀表盤」，這是該數組中的第一項，但是，它沒有得到活躍 -class。如果我添加一個空對象作爲第一個項目到modules - 陣列，「儀表板」項目被正確突出顯示。

奇怪的是，第一項（儀表盤）呈現很好，但它不具備活躍 -class，這引起了印象，該函數this.isActive不叫的第一個項目。

我做錯了嗎？

來源

2013-05-13 brauer

你試過包裹'{{#each模塊}} {{/每} }'in'{{#if modules}} {{/ if}}'？ – rickyduck 2013-05-13 16:01:54

是的（在你的問題上），但它不會改變任何東西。 – brauer 2013-05-13 20:08:55

真的在這裏突發奇想，但我的傳統方法會在下面。我不知道它是否會起作用，但它對於評論太大了，但它又不是一個有保證的解決方案。讓我知道如何去：

替換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-14 08:05:58 rickyduck

是的，這工作正常。謝謝！我想我仍然必須習慣手中幫手中的'this'-context。 – brauer 2013-05-14 11:14:14

@Brauer真棒，不期待它。我不明白爲什麼你的語法不起作用，因爲AFAIK缺少'this'只是假設它是'this' ...哦，很高興幫助:) – rickyduck 2013-05-14 12:28:46

如果它的渲染，每個塊都正常工作。 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-13 22:06:43

#each與呼叫幫手忽略陣列

回答

相關問題