5

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

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

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

有没有办法同时显示 JQM 加载器，或者显示一种“启动画面”，给用户一个“页面正在加载”的反馈？

请注意，在我看来，@Jeroen 提出的解决方案与 jQuery Mobile 的默认页面转换一起也很好，至少正如我在这个 jsfiddle中看到的那样。

老实说，@Omar 提出的技巧在我看来似乎与 JQM 有更好的集成，我将来会尝试将这两个答案结合起来，使用可写的计算 observable 来打开/关闭 JQM 加载器。

4

1 回答 1

10

把事情简单化！默认情况下在您的 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 将为您处理覆盖可见性。

看这个小提琴的演示，或者看看这个堆栈片段：

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>

于 2013-08-29T20:58:50.887 回答