KnockoutJs での制御フロー バインディングの仕組み

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

ドキュメント

• データバインド構文
• バインディングコンテキスト
• 「foreach」バインディング
• 「if」と「ifnot」のバインディング
• 「with」バインディングと「using」バインディング
• 「let」バインディング

---

バインディング

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

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

制御フロー

フォーリーチ

binding foreach は、HTML 要素内で繰り返しを作成し、コレクション内の各項目に対して同じ要素のコピーを生成するために使用されます (配列 や 観察可能な配列など) ) をビューモデルに追加します。これにより、モデルのデータを表示するリストやピボット テーブルを簡単に作成できます。

モデル 配列 の内容が (エントリの追加、移動、または削除によって) 変更されると、foreach の binding は効率的なアルゴリズムを使用して、何が変更されたかを確認できるため、配列に従って DOM を更新できます。これは、シミュレートされた変更の任意の組み合わせを処理できることを意味します。

• 配列に何かが追加されると、foreach はモデルの新しいコピーをレンダリングし、既存の DOM に挿入します。
• 配列内の何かが削除されると、foreach は対応する DOM 要素を単純に削除します。
• 配列内の何かを並べ替える場合 (同じオブジェクト インスタンスを維持する場合)、foreach は通常、対応する DOM 要素を新しい位置に移動するだけです。

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

この場合、変数 $data はループ内で処理されている現在の項目を参照します。これにより、ループ内でその項目のプロパティまたは値にアクセスできるようになります。

as ディレクティブを使用すると、foreach 反復サイクル内の現在の項目を表す変数のカスタム名を定義できます。これにより、コードがより読みやすく、意味のあるものになります。

配列内の項目を削除するのではなく、実際にその存在を見失うことなく非表示にすることが必要な場合があります。これは非破壊的な削除として知られています。破棄されたエントリを非表示にする必要がある場合は、includeDestroyed オプションを false に設定します。

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

生成された DOM 要素に対して追加のカスタム ロジックを実行する必要がある場合は、次のコールバックのいずれかを使用できます。

• afterRender: foreach ブロックが複製されてドキュメントに挿入されるたびに、foreach が初めて初期化されるときと、後で新しいエントリが関連する array;
に追加されるときの両方で呼び出されます。
• afterAdd: は、新しいエントリが 配列 に追加されるときのみ呼び出されることを除いて、afterRender と似ています (foreach が 配列 の初期内容を最初に反復するときは呼び出されません);
• beforeRemove: array から項目が削除されるとき、対応する DOM ノードが削除される前に呼び出されます。 beforeRemove コールバックが指定されている場合、DOM ノードを手動で削除する必要があります。つまり、KnockoutJs は、DOM ノードの物理的な削除がいつ許可されるかを知ることができません。
• beforeMove: array の項目が array 内で位置を変更したとき、対応する DOM ノードが移動される前に呼び出されます。 beforeMove はインデックスが変更されたすべての配列要素に適用されるため、array の先頭に新しい項目が挿入されると、コールバック (指定されている場合) がインデックスとして他のすべての要素に対してトリガーされることに注意してください。順位が一つ上がった。 beforeMove を使用して影響を受ける要素の元の画面座標を保存すると、afterMove コールバックで要素の動きをアニメーション化できます。
• afterMove: 配列 の項目が 配列 内で位置を変更した後、および foreach が一致するように DOM を更新した後に呼び出されます。 afterMove は、インデックスが変更された 配列 のすべての要素に適用されるため、配列 の先頭に新しい項目が挿入されると、コールバック (指定されている場合) がトリガーされることに注意してください。他のすべての要素については、インデックス位置が 1 つ増加しているためです。

もしそうでない場合

if の binding により、指定された式が true (または、 null 以外のオブジェクトまたは空ではない 文字列).

ifnot の バインディング は、渡された式の結果を反転することを除いて、if バインディングとまったく同じように機能します。

if と ifnot は、可視バインディングと非表示バインディングと同様の役割を果たします。違いは、visible の場合、含まれるマークアップは常に DOM 内に残り、そのデータ バインドが常に適用されることです。visible バインディングは CSS を使用して、含まれる要素の表示/非表示を切り替えるだけです。ただし、if リンクは、DOM に含まれるマークアップを物理的に追加または削除し、式が true の場合にのみ子孫にリンクを適用します。式に監視可能な値が含まれる場合、その値が変更されるたびに式は再評価されます。

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

使って

with と using の bindings は、新しいバインディング コンテキストを作成し、子孫要素が指定されたオブジェクトのコンテキストにバインドされるようにします。

binding は、関連付けられた値が falsy であるかどうかに応じて、子孫要素を動的に追加または削除します。

このオプションを使用すると、新しいコンテキスト オブジェクトの エイリアス を定義できます。 $data.
コンテキスト変数を使用してオブジェクトを参照することは可能ですが、

<div data-bind='foreach: { data: myArray, includeDestroyed: false }'>
    ...
</div>

using バインディングは、子孫要素のレンダリングが望ましくない場合の with の代わりとして KnockoutJs 3.5 で導入されました。 using では再レンダリングではなく子孫接続が再評価されるため、各子孫接続には using コンテキストへの追加の依存関係が含まれます。

させて

binding を使用すると、すべての子孫要素のバインディングで参照できるカスタム バインディング コンテキスト プロパティを定義できます。

<div data-bind="if: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for verdadeiro.</p>
</div>

<div data-bind="ifnot: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for falso.</p>
</div>

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