javascript - ノックアウトjsでのforeachバインディングとforeachバインディングのコメント

Question

私の HTML では、これらのノックアウト foreach バインディングを定義できます。

<!-- ko foreach: customer -->
   <div data-bind="text: id" />
<!-- /ko -->

対

<div data-bind="foreach: customer">
    <div data-bind="text: id" />
</div>

これら 2 つのアプローチの違いはどこにありますか?

Answer 1

ul と li のようにバインディング セクション内に親子関係がある場合は、ネイティブ バインディングを使用します。

バインディング セクションに親子関係がない場合は、コンテナレス バインディングのコメント構文を使用します。

あなたの例では、親子構造にバインドしようとしていないため、最初のコード ブロックを使用します。必要なのは、顧客データを div にバインドすることだけです。親 div を作成しforeach、顧客を介して親 div 内に別の div を追加する必要はありません。それはあなたがやりたい以上のものです。

コンテナレスバインディングの上手な使い方

<!-- ko foreach: customer -->
<section>
   <p data-bind="text: customer.name"></p>
   <p data-bind="text: customer.orderDate"></p>
</section>
<!-- /ko -->

ただし、順序付きリストがある場合は、ネイティブ バインディングを使用する必要があります。

ネイティブ

<ol data-bind="foreach: customer">
   <li data-bind="text: customer.name"></li>
</ol>

コンテナレス

<ol> 
   <!-- ko foreach: customer -->
       <li data-bind="text: customer.name"></li>
   <!-- /ko -->
</ol>

2 番目の例はばかげているように見えます。複雑であってはならないものにさらに複雑さを加えています。

Answer 2

場合によっては、マークアップのセクションを複製したいが、foreach バインディングを配置するコンテナー要素がない場合があります。

これを処理するには、コメント タグに基づくコンテナーレス制御フロー構文を使用できます。

「foreach」バインディングのモードの詳細、注 4: コンテナー要素なしで foreach を使用する