Question

我使用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的开发人员工具控制台窗口中抛出“路由器未定义”的消息。

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

有什么想法吗？

Answer 1

那是因为你在forEach绑定中。由于您正在遍历route，因此forEach绑定中的范围将为visibleRoutes。您可以做的是使用$parent来访问父viewModel，就像这样，

<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>

详细了解binding contexts in KO

durandal.router isNavigating属性奇怪的错误

1 个答案: