Question

我有一个自定义的asize导航菜单，在一个数组中有一个MenuItem列表，我将这个列表绑定到带有foreach的ul，以及将MenuItem的属性绑定到li，例如; isActive，Name，Link，Icon。

然后我将路线设置为他们链接到的视图

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

当我在该视图上时，我正在尝试将菜单项css样式更改为活动样式，但我不确定如何进入该事件的范围，或者为这样的事件注册回调的内容。一旦我参加活动，我需要引用其isActive的menuItem或ko.observable，我也不确定该怎么做。

感谢任何帮助，谢谢。

Answer 1

我认为，如果您想要的唯一事情是在视图处于活动状态时更改css而不是在视图处于活动状态时更改css。您可以采用与John Papa所做的热毛巾示例相似的方式实现它。

<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

获得了这个例子

Durandal中的自定义侧面导航菜单在活动时更改样式

1 个答案: