0

我有一个自定义的 asize 导航菜单，其中包含一个数组中的 MenuItem 列表，我将此列表绑定到带有 foreach 的 ul，并将 MenuItem 的属性绑定到 li，例如；isActive、名称、链接、图标。

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

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

当我在该视图上时，我现在尝试将菜单项 css 样式更改为活动样式，但我不确定如何进入该事件的范围，或者为此类事件注册回调什么。一旦我遇到事件，我需要获取对其 isActive 的 menuItem 或 ko.observable 的引用，我也不确定该怎么做。

任何帮助表示赞赏，谢谢。

4

1 回答 1

0

我认为，如果您唯一想要的是在视图处于活动状态和不处于活动状态时更改 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

于 2013-04-27T12:58:24.813 回答