我有一个用 knockout.js 和 jQuery Mobile 构建的单页网络应用程序。
View 模型初始化(即 ko.applyBindings()
函数)大约需要 7-8 秒。在此期间,页面显示为空白。
$(document).ready(function () {
ko.applyBindings(viewModel);
})
有没有办法同时显示 JQM 加载器,或者显示一种“启动画面”,给用户一个“页面正在加载”的反馈?
请注意,在我看来@Jeroen 提出的解决方案与 jQuery Mobile 的默认页面转换一起也很好,至少我可以看到 in this jsfiddle .
老实说,@Omar 提出的技巧在我看来似乎与 JQM 有更好的集成,我将来会尝试将这两个答案结合起来,用可写的计算 observable 来打开/关闭 JQM 加载器。
最佳答案
把事情简单化!默认情况下在您的 html 中显示加载覆盖,但使用 visible: false
某种绑定(bind)。那样当applyBindings
调用完成后,UI 将隐藏覆盖。
例如,假设这个 View :
<div id="main">
<div id="loading-overlay" data-bind="visible: loading"></div>
Some content<br />
Some content
</div>
假设这个 View 模型:
vm = { loading: ko.observable(true) };
然后调用这个:
ko.applyBindings(vm);
如果由于某种原因加载需要 7 秒,加载覆盖将显示,直到 UI 更新。
如果您有客户端 DAL 或运行 Ajax 调用的某个单点,则此方法非常有用,因为您可以遵循以下模式:
vm.loading(true)
vm.loading(false)
Knockout 将为您处理覆盖可见性。
见 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>
关于jquery-mobile - 如何在 knockout.js 初始化期间显示 "loader"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18513028/