如何在knockout.js初始化期间显示“加载程序”？

Question

我有一个使用knockout.js和jQuery Mobile构建的单页web应用程序。

视图模型初始化（即ko.applyBindings()函数）大约需要7-8秒。在此期间，该页面显示为空白。

$(document).ready(function() { 
    ko.applyBindings(viewModel); 
}) 

有没有一种方式来展现JQM装载机的同时，或显示一种“闪屏”，给予用户反馈的“页面加载”？

请注意，在我看来，@Jeroen提出的解决方案与jQuery Mobile的默认页面转换一起也很好，至少我可以看到in this jsfiddle。

说实话，@Omar提出的提示在我看来似乎与JQM更好的集成，我将在未来尝试将这两个答案与一个可写的计算可观察值结合起来，以切换JQM加载器的开启/关闭。

Answer 1

保持简单！在默认情况下在你的html中显示一个加载覆盖图，但使用某种visible: false绑定。通过这种方式，applyBindings调用完成后，UI将隐藏覆盖图。

例如，假设这样的观点：

<div id="main"> 
    <div id="loading-overlay" data-bind="visible: loading"></div> 
    Some content<br /> 
    Some content 
</div> 

并假设该视图模型：

vm = { loading: ko.observable(true) }; 

则调用此：

ko.applyBindings(vm); 

如果出于某种原因需要7秒要加载，将显示加载覆盖图，直到UI被更新。

这种方法是伟大的，如果你有一个客户端DAL或一些单点运行Ajax调用，因为你可以按照这个模式：有回调的成功和失败

1. vm.loading(true)
2. Ajax调用
3. 回调做vm.loading(false)

淘汰赛会为您处理重叠的知名度。

的演示中看到this fiddle，或看看这个堆栈段：

vm = { loading: ko.observable(true) }; 
 

 
ko.applyBindings(vm); 
 

 
// Mock long loading time: 
 
window.setTimeout(function() { 
 
    vm.loading(false); 
 
}, 5000);

html { height: 100%; } 
 

 
body { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#loading-overlay { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    background: url('http://img.cdn.tl/loading51.gif') white no-repeat center; 
 
    opacity: 0.75; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<div id="main"> 
 
    <div id="loading-overlay" data-bind="visible: loading"></div> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    <input type='text' value='cant edit me until overlay is gone' /><br /> 
 
    <button>can't press me until overlay's gone!</button><br /> 
 
    Some content<br /> 
 
    Some content<br /> 
 
    Some content 
 
</div>