70

Html で次のノックアウト スクリプトを使用しています。

<!-- kno ifnot: bla -->

 <tr><td>some stuff</td></tr>

<!-- /ko -->

私が抱えている問題は、バインディングが実行される前に、この行が 1 ～ 2 秒間表示されることです。

どうすればこれを防ぐことができますか?

4

4 に答える 4

157

これが簡単なトリックです。ルート要素を最初は非表示にし、可視バインディングを true に設定するだけです。

<div style="display: none;" data-bind="visible: true">
    <!-- the rest of your stuff -->
</div>

レンダリングされると、ノックアウトが機能する前に、最初は非表示になります。バインディングが適用されると、ノックアウトはスタイルをオーバーライドして表示します。

または、ビューをスクリプト ブロックに投入し、テンプレートを使用してインスタンス化することもできます。スクリプト ブロックはレンダリングされませんが、ノックアウトがテンプレートをレンダリングするときに表示されます。

<!-- ko template: 'myView' --><!-- /ko -->
<script id="myView" type="text/html">
    <!-- the rest of your stuff -->
</script>
于 2012-11-01T01:04:31.310 に答える
2

必要な動作はページごとに異なることが多いため、これが私のレイアウト/テンプレート ファイル (ASP.NET) で行っていることです。

 <div class="ko-unbound" data-bind="css: { 'ko-unbound': false, 'ko-bound': true }">
    @RenderBody()
 </div>

ページが綴じられている場合:

  • ko-unboundクラスはページから削除されます (最初にclass属性で追加されます)。
  • ko-boundクラスがページに追加されます。

次に、不要なコンテンツが問題となるページで、これら 2 つのクラスに基づいて CSS をカスタマイズして表示または非表示にできます。また、この手法を使用して、「読み込み中」の画像を表示したり、要素に最小の高さを課したりします。

.ko-unbound #storeWizard
{
    display: none;  // hide entire section when the page is binding
}

.ko-bound #loadingGraphic
{
    display: none;  // hide loading graphic after page is bound
}

テスト中、バインディングを適用するときにタイムアウトを追加して、フラッシュが見えるようにします。

 setTimeout(function ()
 {
     ko.applyBindings(RR.VM);

 }, 300);
于 2015-02-08T06:22:10.277 に答える
1

HTMLを次のようにラップします-

<div id="hideme" style="display:none">
</div>

次に、JavaScript で、apply binding の後に次の jquery 行を追加します。

$('#hideme').show();

これは、私が見つけた最も簡単な方法です。いくつかのノックアウト バインディングを使用してこれを行うこともできますが、バインディングの実行順序を制御できないため、保証されたタイミングが失われます。

于 2012-10-31T23:33:27.697 に答える
0

ここで見つけた別の解決策

<div id="binding-start" style="visibility:hidden" data-bind="attr: { 'style': 'visibility:visible' }" />

これには、ニーズに応じて、非表示のコンテンツ用にスペースが予約されるという利点または欠点があります。バインディングが適用されると、ページは「ジャンプ」しません。

于 2017-10-10T09:04:50.720 に答える