0

我使用 durandal 路由器在页面加载时显示一个旋转图标。这是使它出现或隐藏自身的代码:

<div data-bind="css: { activeLoader: router.isNavigating }" class="pull-right">
    <i class="fa fa-spinner fa-spin"></i>
</div>

但是,我想把它放在我的导航中,如下所示:

<nav class="main-nav">
    <ul data-bind="foreach: router.visibleRoutes">
        <li>
            <a data-bind="attr: { href: hash }, css: { active: isActive }, html: caption"></a>
            <i data-bind="css: { activeLoader: router.isNavigating }" class="fa fa-spinner fa-spin pull-right"></i>
        </li>
    </ul>
</nav>

这会在 chrome 的开发人员工具控制台窗口中引发消息“路由器未定义”。

但如果我使用上面的第一个片段,一切正常。

有任何想法吗?

4

1 回答 1

0

那是因为您在 forEach 绑定中。forEach 绑定中的范围将是 a route,因为您正在遍历visibleRoutes. 您可以做的是$parent像这样使用访问父视图模型,

<ul data-bind="foreach: router.visibleRoutes">
        <li>
            <a data-bind="attr: { href: hash }, css: { active: isActive }, html: caption"></a>
            <i data-bind="css: { activeLoader: $parent.router.isNavigating }" class="fa fa-spinner fa-spin pull-right"></i>
        </li>
    </ul> 

阅读更多关于KO 中的绑定上下文

于 2013-12-02T03:32:58.367 回答