KnockoutJs でのテキストと外観のバインディングの仕組み

このコンテンツは基本的にオリジナル資料の翻訳です。目的は、Magento 2 の KnockoutJs について学び、KnockoutJs に関するポルトガル語のコンテンツを作成することです。

ドキュメント

• データバインド構文
• バインディングコンテキスト
• 「表示」バインディングと「非表示」バインディング
• 「テキスト」バインディング
• 「html」バインディング
• 「クラス」バインディングと「CSS」バインディング
• 「スタイル」バインディング
• 「attr」バインディング

---

バインディング

KnockoutJs では、バインディング は、ViewModel のロジック (データおよびビジネス ロジック) を View (HTML) に接続する方法です。つまり、バインディングを通じて、DOM を直接操作することなく、ユーザー インターフェイスがデータの変更を自動的に反映します。

KnockoutJ のバインディングは、HTML 要素の data-bind 属性を通じて機能します。この属性では、使用するバインディングと関連する値を指定します。

テキストと外観の制御

見える

visible binding は、ViewModel 内の observable の値に基づいて HTML 要素の可視性を制御するために使用されます。 ViewModel.
で定義された特定の条件に基づいて要素を表示または非表示にすることができます。

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

条件が false (false、0、null、または未定義) に近い値の場合、表示されるバインディングはスタイルを none に設定し、非表示になります。これは、CSS を使用して設定できるどの表示スタイルよりも優先されます。

隠れた

binding hidden は、ViewModel の observable の値に基づいて HTML 要素を非表示にするために使用されます。要素の可視性を制御する *visible* バインディングとは異なり、*hidden* バインディングは、指定された条件が満たされた場合に UI 要素を非表示にします。

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

文章

バインディング テキストは、ViewModel からの observable の値で HTML 要素のコンテンツを更新するために使用されます。 observable のテキストを HTML 要素に直接挿入できるため、observable の値の変更が表示されるテキストに自動的に反映されます。

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

このパラメータが 観察可能な 値の場合、値が変更されるたびにバインディングによって要素のテキストが更新されます。パラメータが観察可能でない場合、要素テキストは一度だけ設定され、後で再度更新されることはありません。

指定された値が数値または 文字列以外の場合、表示されるテキストは yourParameter.toString() と同等になります。

このバインディングはテキスト ノードを使用してテキスト値を設定するため、HTML やスクリプト インジェクションの危険を冒さずに任意の文字列値を安全に設定できます。

HTML

binding html は、動的 HTML コンテンツを UI 要素に挿入するために使用されます。これにより、observable またはその ViewModel からの式から生成された HTML を使用して要素のコンテンツを更新できます。

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

KnockoutJs は前のコンテンツをクリアし、jQuery の html 関数を使用して要素のコンテンツをパラメータ値に設定するか、jQuery がそうでない場合は string を HTML ノードに解析し、各ノードを要素の子として追加します。利用可能です。

このパラメータが observable の場合、値が変更されるたびにバインディングによって要素のコンテンツが更新されます。パラメータが観察可能でない場合、要素のコンテンツは一度だけ設定され、後で再度更新されることはありません。

指定された値が数値または 文字列以外の場合、表示されるテキストは yourParameter.toString() と同等になります。

クラス

binding クラスは、observable の値またはその ViewModel の式に基づいて HTML 要素に適用される CSS クラスを制御するために使用されます。これにより、アプリケーションのさまざまな条件や状態に基づいて要素の CSS クラスを動的に変更できます。クラスは正当な識別子名ではありません。クラスを HTML 要素に割り当てる正しい方法は、識別子名を引用符で囲んでリテラルの string.
にすることです。

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

パラメータ値は、要素に追加する CSS クラスに対応する 文字列 である必要があります。パラメーターが observable を参照している場合、バインディングは値が変更されるたびにクラスを更新し、以前に追加されたクラスを削除し、新しい値のクラスを追加します。

CSS

binding CSS は、observable の値またはその ViewModel の式に基づいて CSS スタイルを HTML 要素に動的に適用するために使用されます。これにより、アプリケーションのさまざまな条件や状態に基づいて要素の視覚スタイルを変更できます。名前を引用符で囲むことにより、同じ条件に基づいて複数の CSS クラスを定義できます。

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

プロパティ名が CSS クラスである JavaScript オブジェクトを渡す必要があります。その値は、その時点でクラスを適用するかどうかに応じて true または false に評価されます。

パラメータが observable 値を参照している場合、observable が変更されるたびにバインディングによって CSS クラスが追加または削除されます。パラメーターが observable を参照していない場合、クラスの追加または削除は 1 回だけ行われ、後で再度行われることはありません。

スタイル

binding スタイルは、observable の値またはその ViewModel の式に基づいて HTML 要素にインライン CSS スタイルを適用するために使用されます。これにより、アプリケーションのさまざまな条件や状態に基づいて、要素の視覚スタイルをインラインで直接変更できるようになります。

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

プロパティ名がスタイル名に対応し、値が適用するスタイルの値に対応する JavaScript オブジェクトを渡す必要があります。

パラメータが observable を参照している場合、バインディングは observable が変更されるたびにスタイルを更新します。パラメータが observable を参照していない場合、スタイルは 1 回だけ設定され、後で更新されません。

名前が有効な JavaScript 識別子ではない (ハイフンなどが含まれているため) スタイルを適用する場合は、引用符で囲むか、名前を camelCase で使用できます。スタイル

• { 'font-weight': someValue }
• { fontWeight: someValue }

単位を必要とするスタイルに単純な数値を適用すると、KnockoutJs はスタイルを設定する前に値に px を追加します。

属性

binding 属性は、observable または ViewModel 式の値に基づいて要素の HTML 属性を設定または更新するために使用されます。これにより、アプリケーションのさまざまな条件や状態に基づいて、HTML 要素の属性を動的に変更できます。

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

プロパティ名が属性名に対応し、値が適用する属性の値に対応する JavaScript オブジェクトを渡す必要があります。

パラメータが observable を参照している場合、バインディングは observable が変更されるたびに属性を更新します。パラメーターが observable を参照していない場合、属性は 1 回だけ設定され、後で更新されません。

以上がKnockoutJs でのテキストと外観のバインディングの仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。