2

Can.js で同じことを行うには、いくつかの異なる方法があるようです。これは素晴らしいことです。ただし、一部の方法は他の方法とは少し異なり、DOM のレンダリングおよび更新方法に影響を与える可能性があります。誰かがニュアンスを明確にしてくれれば幸いです。

この選択が興味深いシナリオは、デフォルトのテキストまたは空のリストのプレースホルダーが必要な場合だと思います。

{{#if list}} および {{#if list.length}}

これらは同じではありません。空の配列と can.List の両方が に対してレンダリングされ{{#if list}}ます。

フィドル

{{#各リスト}}

だから私たちが学んだことを使って#if...

{{#if list.length}}
   <ul>
      {{#each list}}
         <li>...<li>
      {{/each}}
   </ul>
{{else}}
   <i>The list is empty.</i>
{{/if}}

{{＃リスト}}

これは、両方の世界で最高のものになることを意図していると思います。これはブロック ヘルパーであるため、{{else}}.

{{#list}}
   rendered for each item in list
{{else}}
   rendered once if list is empty
{{/list}}

問題は、これは で行った html を生成できないということです#each。

  • すべてをタグでラップする<ul>と、リストが空であるかどうかに関係なくレンダリングされます
  • タグ<ul>を最初のブロック (肯定的なブロック?肯定的なブロック?) に貼り付けると、毎回レンダリングされます。

したがって、実装はマークアップに依存しているようです。けっこうだ。

これがこすりです。

おそらく、 DOMを別の方法#eachで#list更新します。ドキュメントから#each...

キーの値が can.List の場合、結果の HTML はリストが変更されると更新されます。リストの変更が発生すると、最小限の DOM 要素の変更のみが発生します。

したがって、リストに 1 つの項目を追加すると、その項目のみがレンダリングされ、項目を削除すると、その要素のみが削除されます。の動作#listは文書化されていませんが、ブロック全体を再レンダリングする可能性があるという印象を受けています。

質問

どれが最高ですか？より簡潔であることに加え#listて、利点があるかどうかはわかりませんが、なぜ著者はそれが好ましいと示唆しているのですか?

4

1 に答える 1

5

list が can.List インスタンスであると仮定します。

{{#if list}} リストの真の値をチェックします。これは、任意の JS オブジェクトの true 値をチェックすることに似ており、リストの内容や長さに関係なく true になります。

{{#if list.length}}length 属性の真の値をチェックします。空のリストがある場合、長さは 0 になるため、#if は false になり、コンテンツはレンダリングされません。長さが >= 1 の場合、結果は true になり、#if の内容がレンダリングされます。

#each#listどちらも can.List のインスタンスを反復処理しますが、バインディングの設定は異なります。

#each反復される個々のアイテムごとにバインディングをセットアップしますが、セットアップし#listません。これにより、次の 2 つのシナリオで違いが生じます。

1) 大きなリストがあり、最初のレンダリング後に最小限の更新が計画されています。この場合、#list初期レンダリングが高速になるため、より有利な場合があります。ただし、リストの一部が変更#listされると、領域全体が再処理されます。

2) リストが大きく、最初のレンダリング後に多くの更新が計画されています。たとえば、編集可能なフィールドの列が多数あるグリッド。この場合、#each最初のレンダリングでは遅くなりますが (より多くのバインディングを設定しています)、多くのユーザーが を使用したいと考えていますが、多くのセクションが存在するため、更新はより高速になります。

リストに内容が含まれている場合の簡単なメモ...、そうでない場合はリスト領域が空です:

{{#each items}} リスト項目をループしています! {{/各}}

{{^if items.length}} アイテムがない場合に表示します! {{/もしも}}

上記はそのシナリオを説明する必要があります。追加のロジックがある場合は、カスタム ヘルパーを作成することを検討します (ロジックがどのように見えるかによって異なります)。

于 2014-10-03T16:09:18.427 に答える