web-dev-qa-db-ja.com

ノックアウトjsバインディングの構築中に画面を非表示にする最良の方法は何ですか？

私はノックアウトの大ファンです。私は今、すべてのWeb開発に使用しており、単純にそれを気に入っています。私が理解できていないことの1つは、knockoutjsバインディングの構築中にUIを非表示にする方法です。

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

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

javascriptmvvmknockout.js
76
Luc

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

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

<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>

-もう1つの選択肢は、バインドが適用された後にオブザーバブルをvisibleに変更するloadedオブザーバブルに関連付けることができるtrueバインディングと共に、コンテナー要素でstyle="display: none"を使用することです。

71
RP Niemeyer

私はこれをグーグルで探していましたが、観察可能な方法を使用した後、別のアプローチを考えました：

<div style="display: none" data-bind="visible: true">
  <ul data-bind="foreach: items">
    <li data-bind="text: name"></li>
  </ul>
</div>

Observableは必要ありません。データバインディングが完了すると、visibleは常にtrueと評価されます。

192
Jason More

MVVM実装 のバインドの前にスタイルが設定されていないウィジェットが表示されることが心配な場合は、CSSのみのメソッドを使用します。

[data-role]:not([role], [tabindex]) {
    visibility: hidden;
}

すべてのKendoウィジェットでテストしたわけではありませんが、ほとんどの場合は動作するようです。

0
Sunny Patel

インラインスタイルの代わりに「非表示」と「表示」のクラスを使用する代替アプローチです。コンテンツが読み込まれるまで非表示にする必要がある要素に「非表示」クラスを追加し、「css」データバインディングを追加してそれを作成しますバインドされているときに表示されます。

<div class="hide" data-bind="css: {'show': true}">

</div>

「hide」および「show」クラスは、Bootstrapですでに定義されています。

Bootstrapが使用されていない場合、CSSは次のように定義できます。

.hide {
  display: none !important;
}
.show {
  display: block !important;
}

順序が重要です。 「非表示」クラスは「表示」の前に定義する必要があります。

0
M Y K