3

はぁはぁ、「毎日の質問」が日課になりつつあります、すいません！

以下を含む nav.html があります。

    <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
        <i class="icon-spinner icon-2x icon-spin"></i>
    </div>

問題は、非アクティブ化されないことです! 基本的に、スピナーは常に回転し続けます。

Durandal html サンプル ページのようにビューモデルにデバッグを入れました。

    var vm = {
        activate: activate,
        //refresh: refresh,
        //sessions: sessions,
        title: 'My App Home Page',
        activate: function () {
            system.log('Lifecycle : activate : home');
        },
        binding: function () {
            system.log('Lifecycle : binding : home');
            return { cacheViews: false }; //cancels view caching for this module, allowing the triggering of the detached callback
        },
        bindingComplete: function () {
            system.log('Lifecycle : bindingComplete : home');
        },
        attached: function (view, parent) {
            system.log('Lifecycle : attached : home');
        },
        compositionComplete: function (view) {
            system.log('Lifecycle : compositionComplete : home');
        },
        detached: function (view) {
            system.log('Lifecycle : detached : home');
        }

        //viewAttached: viewAttached
    };

私のChrome開発コンソールには次のものがあります：

Lifecycle : bindingComplete : home system.js:73
Lifecycle : attached : home system.js:73
Lifecycle : compositionComplete : home system.js:73

...そして、「compositionComplete」が「router.isNavigating」の終了をトリガーしたと思いましたか?

nav.html は、次のように shell.html ファイルで構成されます。

<header>
    <!-- ko compose: {view: 'nav'} -->
    <!-- /ko-->
</header>

基本的に、スピナーは右上にとどまり、消えることはありません。「compositionComplete」が毎回起動しても、2 つのページ間を移動できます。

shell.html ファイル全体:

<div>
    <header>
        <!-- ko compose: {view: 'nav'} -->
        <!-- /ko-->
    </header>
      <div>
        <section id="content" class="main">
            <!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
        </section>
      </div>
</div>

編集された shell.html ファイル:

<div>
    <header>
        <nav class="navbar navbar-default">
          <div class="navbar-header">
                <a class="navbar-brand" href="/">
                    <span class="title">My test SPA</span>
                </a>
            </div>
            <div>
                <ul class="nav navbar-nav" data-bind="foreach: router.navigationModel">
                    <li data-bind="css: { active: isActive }">
                        <a data-bind="attr: { href: hash }, html: title"></a>
                    </li>
                </ul>
                <p class="navbar-text pull-right">Logged in as <a href="#" class="navbar-link">Bilbo Baggins</a></p>
                <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
                    <i class="icon-spinner icon-2x icon-spin"></i>
                </div>

            </div>
        </nav>
    </header>
      <div>
        <section id="content" class="main">
            <!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
        </section>
      </div>
</div>
4

1 に答える 1

6

routerこれは、でを使用して合成を行う方法が原因である可能性がありますshell.html。

durandal 2.0 では、次のようになります。

<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->

または、古い方法のように維持したい場合は、次のようにします。

<!--ko compose: {model: router.activeItem, 
        attached: router.attached,      
        compositionComplete: router.compositionComplete,     
        transition: 'entrance'} -->
    <!--/ko-->

また、読み込み中の gifで css クラスactiveが期待どおりに機能しない可能性があることも考慮してください。div代わりに、次を使用できます。

<div class="loader pull-right" data-bind="visible: router.isNavigating">

そのため、ナビゲートしていないときはローダー gif を非表示にします。

于 2013-08-28T11:41:06.980 に答える