2013-05-13 2 views
0

Я пытаюсь создать меню с помощью рулей, на основе этого массива (от 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" 

Based на Session.get 'module' соответствующий пункт меню подсвечивается классом css активным.

На перезаряжания, сеанс переменной module содержит «панель», которая является первой записью в этом массиве, однако, он не получает активных -класса. Если я добавлю пустой объект в качестве первого элемента в modules -array, элемент «приборная панель» будет правильно выделен.

Странная вещь, что первый элемент (панель) оказывается хорошо, но это не имеет активный -класса, который поднимает впечатление, что функция this.isActive не вызывается для первого элемента.

Я делаю это неправильно?

+0

вы пробовали обертывания '{{#each модули}} {{/} каждый } 'в' {{#if modules}} {{/ if}} '? – rickyduck

+0

Да (по вашему вопросу), но это ничего не меняет. – brauer

ответ

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" 
+0

Да, это прекрасно работает. Благодаря! По-моему, мне все еще нужно привыкнуть к «этому» контексту в хэдперах. – brauer

+0

@Brauer потрясающий, не ожидал этого. Я действительно не понимаю, почему ваш синтаксис не работал как AFAIK, отсутствие «этого» просто предполагает, что это «это» ... о, хорошо, рад помочь :) – rickyduck

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); 
    } 
}); 

Тогда вы можете назвать это внутри каждого блока и увидеть все значения текущий контекст/конкретное значение имеет.

Смежные вопросы