5

ノックアウト js と jQuery Mobile で構築された単一ページの Web アプリがあります。

ビューモデルの初期化 (つまりko.applyBindings()関数) には約 7 ～ 8 秒かかります。この間、ページは空白で表示されます。

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

その間にJQMローダーを表示する方法、または一種の「スプラッシュ画面」を表示して、「ページがロードされている」というフィードバックをユーザーに与える方法はありますか?

少なくともこの jsfiddle でわかるように、 @Jeroen によって提案されたソリューションは、jQuery Mobile のデフォルトのページ遷移と組み合わせても優れているように思われることに注意してください。

正直なところ、@Omar によって提案されたヒントは、JQM との統合が改善されているように思われます。将来的には、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 に答える