javascript - Canjs – 迭代列表时何时使用哪个 mustache 标签？

Question

在 Can.js 中似乎有几种不同的方法可以做同样的事情，这太棒了!但是有些方法的工作方式与其他方法略有不同，并且会影响 DOM 的呈现和更新方式。如果有人能澄清其中的细微差别，我将不胜感激。

我认为这种选择变得有趣的场景是当您想要一些默认文本或空列表的占位符时。

{{#if list}} and {{#if list.length}}

这些不一样。 空数组和 can.List 都将呈现 {{#if list}}。 .

fiddle

{{#each list}}

所以使用我们在 #if 中学到的知识...

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

{{#list}}

我认为这是为了两全其美。我今天才想到，因为这是一个 block 助手，它支持 {{else}} .

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

问题是，这无法生成我们用 #each 生成的 html .

• 将整个内容包装在 <ul> 中标签，无论列表是否为空，它都会被渲染
• 贴上 <ul>第一个 block 中的标记(肯定 block ？肯定？)并且它每次都呈现

所以实现似乎依赖于标记。很公平。

问题来了。

据说，#each和 #list以不同的方式更新 DOM。来自 #each 的文档...

If the value of the key is a can.List, the resulting HTML is updated when the list changes. When a change in the list happens, only the minimum amount of DOM element changes occur.

所以添加一个项目到列表中，只有那个项目被渲染，删除一个项目，只有那个元素被删除。 #list 的行为没有记录，但我的印象是它可能会重新渲染整个 block 。

问题

哪个最好？除了更简洁，我不确​​定#list有任何优势，那么为什么作者建议它是首选？

Answer 1

假设 list 是一个 can.List 实例:

{{#if list}}将检查列表的真实值。这类似于检查任何 JS 对象的真实值，无论列表内容或长度如何，结果都会为真。

{{#if list.length}} 将检查长度属性的真值。如果您有一个空列表，长度将为 0，因此 #if 将导致 false 并且不会呈现任何内容。如果长度 >= 1，则结果为真，#if 的内容将被渲染。

#each 和 #list 都遍历 can.List 的一个实例，但是我们设置绑定(bind)的方式不同。

#each 将在迭代的每个单独项目上设置绑定(bind)，而 #list 则不会。这在两种情况下有所不同:

1) 你有一个大列表，在初始渲染后计划进行最少的更新。在这种情况下，#list 可能更有优势，因为初始渲染速度更快。然而，如果列表的任何部分发生变化，整个#list区域将被重新处理。

2) 您有一个很大的列表，在初始渲染后计划进行许多更新。例如，具有许多可编辑字段列的网格。在这种情况下，你们很多人都想使用 #each，即使它在初始渲染时会更慢(我们正在设置更多绑定(bind))，你也会有更快的更新，因为现在有很多部分.

关于如果列表有内容...，否则为空列表区域的情况的快速说明:

{{#每一项}}遍历列表项!{{/每个}}

{{^if items.length}}显示是否没有项目!{{/if}}

以上应该说明了这种情况。如果有额外的逻辑，我会考虑编写一个自定义帮助程序(取决于逻辑的样子)。