叹息这已经成为我的“每日问题”例行公事,抱歉!
我有一个 nav.html,其中包含:
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
问题是,它永远不会停用!基本上,旋转器始终保持旋转。
我已经在 View 模型中进行了调试,就像 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”,它也会停留在那里。
整个 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>
最佳答案
这可能是因为您在 shell.html
中使用 router
进行组合的方式。
在 durandal 2.0 中,它应该如下所示:
<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
或者,如果您想像以前一样保留它:
<!--ko compose: {model: router.activeItem,
attached: router.attached,
compositionComplete: router.compositionComplete,
transition: 'entrance'} -->
<!--/ko-->
还要考虑到 css 类 active
可能无法在加载 gif 的 div
中按预期工作。相反,您可以使用:
<div class="loader pull-right" data-bind="visible: router.isNavigating">
因此,当加载程序未导航时,您将隐藏它。
关于Durandal:router.isNavigating 应在生命周期的哪个阶段停用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18486258/