如何在knockout.js初始化期間顯示「加載程序」？

Question

我有一個使用knockout.js和jQuery Mobile構建的單頁web應用程序。

視圖模型初始化（即ko.applyBindings()函數）大約需要7-8秒。在此期間，該頁面顯示爲空白。

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

有沒有一種方式來展現JQM裝載機的同時，或顯示一種「閃屏」，給予用戶反饋的「頁面加載」？

請注意，在我看來，@Jeroen提出的解決方案與jQuery Mobile的默認頁面轉換一起也很好，至少我可以看到in this jsfiddle。

說實話，@Omar提出的提示在我看來似乎與JQM更好的集成，我將在未來嘗試將這兩個答案與一個可寫的計算可觀察值結合起來，以切換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)

淘汰賽會爲您處理重疊的知名度。

的演示中看到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>