如何在knockout.js初始化期间显示"加载器"？

Question

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

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

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

有没有办法在此期间显示JQM加载程序,或者显示一种"启动画面",以便向用户提供"页面正在加载"的反馈？

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

说实话,@ Omar提出的提示在我看来与JQM有更好的集成,我将在未来尝试将两个答案结合起来,使用可写的计算observable来打开/关闭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)

Knockout将为您处理叠加可见性.

请参阅此小提琴进行演示,或查看此Stack Snippet:

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>