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 の開発者ツール コンソール ウィンドウ内に「 router is not defined 」というメッセージがスローされます。

しかし、上記の最初のスニペットを使用すると、すべて正常に動作します。

何か案は？

4

1 に答える 1

0

これは、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>

KO でのバインディング コンテキストの詳細を読む

于 2013-12-02T03:32:58.367 に答える