我有一个单页面的Web应用程序,该应用程序是用tickout.js和jQuery Mobile构建的。

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

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

有没有办法同时显示JQM加载程序,或显示一种“启动画面”,以向用户提供“页面正在加载”的反馈?

请注意,在我看来,@ Jeroen提出的解决方案与jQuery Mobile的默认页面转换一起也不错,至少在我能看到in this jsfiddle的情况下。

老实说,@ Omar提出的技巧在我看来似乎与JQM更好地集成在一起,并且我将来会尝试将这两个答案与可写的可计算观察值结合起来以打开/关闭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)
  • 带有成功和失败回调的Ajax调用
  • 在回调上执行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>

    10-07 19:38
    查看更多