如何在knockout.js初始化期间显示“加载程序”？
如何在knockout.js初始化期间显示“加载程序”？
提问于 2013-08-29 13:58:47
我有一个用knockout.js和jQuery手机构建的单页网页应用程序。
视图模型初始化(即ko.applyBindings()函数)大约需要7-8秒.在此期间，页面显示为空白。
$(document).ready(function () {
ko.applyBindings(viewModel);
})是否有方法同时显示JQM加载程序，或者显示一种“启动屏幕”，向用户提供“页面正在加载”的反馈？
请注意，在我看来，@Jeroen提出的解决方案与jQuery移动的默认页面转换(至少如我所能看到的在这弹琴里一样)也是很好的。
老实说，在我看来，@Omar提出的提示似乎与JQM有更好的集成，今后我将尝试将这两个答案结合起来，使用可写计算可观察到的方法来打开/关闭JQM加载程序。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-29 20:58:50
保持简单！默认情况下，在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调用的某个点，这种方法是很好的，因为您可以遵循以下模式：
vm.loading(true)- Ajax调用，回调成功和失败
- 关于回调做
vm.loading(false)
淘汰赛将处理覆盖可见性为您。
有关演示，请参见这把小提琴，或查看以下堆栈片段：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18513028
复制相关文章
相似问题
腾讯云开发者
