пользовательское боковое навигационное меню в Durandal, изменяющее стиль при активном

У меня есть пользовательское навигационное меню размера со списком MenuItem в массиве, я привязываю этот список к ul с помощью foreach, а свойства MenuItem к li, например; isActive, Имя, Ссылка, Значок.

Затем я устанавливаю маршрут к представлению, на которое они ссылаются.

router.mapRoute('games', 'viewmodels/games', 'games');

Теперь я пытаюсь изменить стиль css пункта меню на активный стиль, когда я нахожусь в этом представлении, но я не уверен, как попасть в область действия этого события или что зарегистрировать обратный вызов для такого события. Как только я нахожусь в событии, мне нужно получить ссылку на menuItem или ko.observable его isActive, что я также не знаю, как это сделать.

Любая помощь приветствуется, спасибо.


javascript menu html nav durandal
person Alexander Zanfir    schedule 26.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что если единственное, что вы хотите, это изменить css, когда представление активно, а когда нет. Вы можете реализовать это так же, как в примере с горячим полотенцем, сделанном Джоном Папой.

<nav class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <a class="brand" href="/">
            <span class="title">Hot Towel SPA</span> 
        </a>
        <div class="btn-group" data-bind="foreach: router.visibleRoutes">
            <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" 
                class="btn btn-info" href="#"></a>
        </div>
        <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
            <div class="progress progress-striped active page-progress-bar">
                <div class="bar" style="width: 100px;"></div>
            </div>
        </div>
    </div>
</nav>

Я получил этот пример из: https://github.com/johnpapa/HotTowel

person jvrdelafuente    schedule 27.04.2013