web-dev-qa-db-ja.com

コメントforeachバインディングvs knockoutjsのforeachバインディング

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

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

対

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

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

javascriptknockout.jstemplatingknockout-templating
51
Elisabeth

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番目の例は馬鹿げています。複雑にすべきではないものに、さらに複雑さを加えています。

64
David East

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

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

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

2
Claudio Redi