knockout.js - 一番下にスクリプト？

Question

ビューモデル スクリプトをページの下部に含めましたが、問題があります。問題は、applyBindings呼び出されるまでです (これも下部にあります) ユーザーは、バインドされていないページを 1 秒間見ることができ、ネイキッド テンプレートが表示されます。解決策の 1 つは、スクリプトを上部に配置してラップapplyBindingsイン$()または「ドキュメント準備完了」にすることです。しかし、問題を解決してスクリプトを最下部に保持する方法がないことを受け入れることを本当に拒否します.

Answer 1

私はいつも次のようなものを使用します：

<div data-bind="visible:true" style="display:none">
    ...
</div>

Answer 2

css バインディングを使用して、バインドされていない要素の表示を切り替えることができます。

おそらく包含要素で、次のようにします。

<div data-binding="css: { notready: !isReady()}" class="notready">
  Other children with bindings
</div>

CSS クラスを追加します。

.notready { display : none; }

次に、新しいオブザーバブルをビュー モデルに追加します。

isReady : ko.observable(true)

が に評価されると、コードはnotreadyCSS クラスを切り替え/削除します。isReadytrue

Answer 3

問題の要素を CSS で非表示にし、後で表示することができます。applyBindings

CSS

.hide-while-loading { display: none }

JS

var elements = document.getElementsByClassName('hide-while-loading ');
for (var i = 0; i < elements.length; ++i) {
    // remove class:
    elements[i].className = elements[i].className.replace('/\bhide-while-loading\b/','');
}

実際には、コードは要素を表示するだけでなく、クラスを削除して、非表示にする必要hide-while-loadingがある要素を非表示のままにします。