knockout jsバインディングのビルド中に画面を隠すにはどうしたらよいですか？

質問

私はknockoutjsの大ファンです。私は今、すべてのWeb開発にそれを使用しており、単にそれを愛しています。しかし、1つのことは、Knockoutjsバインディングが構築されている間、UIを隠す方法を見つけ出すことができなかったことです。

例えば、私のページでは多くのテンプレートが使用されており、非常に堅牢なユーザーインターフェイスがあります。 私が気づいている問題は、ユーザーが最初にページにアクセスしたとき、バインディングが作動してそれらを隠す前に、一瞬だけ私のすべてのテンプレートが見えることです。

この問題を解決する最良の方法は何でしょうか？私はそれらを隠すためにヘルパー クラスを使用してみましたが、ヘルパー クラスの参照 (すなわち ui-helper-hidden) を削除しない限り、テンプレートは 'visible' および 'if' バインディングを使用して表示することができません。

どのように解決するのですか？

ここで使用できる戦略がいくつかあります。

-1つは、実際のコンテンツをすべてscriptタグの中にあるテンプレートに配置することです（ネイティブテンプレートでうまく機能します）。 テンプレート内では、コントロール フローのバインディングを使用できます。 これは次のようなものです。

<div data-bind="template: 'contentTmpl'"></div>

<script id="contentTmpl" type="text/html">
   <ul data-bind="foreach: items">
       <li data-bind="text: name"></li>
   </ul>
</script>

-もう一つの選択肢は style="display: none" をコンテナ要素に付加することです。 visible というバインディングがあります。 loaded に変更する場合、observable は true に変更します。