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

Question

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

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

这些不一样。空数组和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}}

问题是，这不能产生我们用#each做的html。

因此实现似乎取决于标记。很公平。

这是擦除。

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

如果键的值是can.List，则在列表更改时更新生成的HTML。当列表发生更改时，仅发生最小量的DOM元素更改。

因此，在列表中添加一个项目，仅渲染该项目，删除项目，仅删除该元素。 #list的行为没有记录，但我认为它可能会重新渲染整个块。

哪个最好？除了更简洁之外，我不确定#list是否有任何优势，那么为什么作者认为它更受欢迎？

Answer 1

假设list是can.List实例：

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

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

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

#each将对正在迭代的每个项目设置绑定，而#list则不会。这在两种情况下有所不同：

1）您有一个大型列表，初始渲染后计划的更新次数最少。在这种情况下，#list可能更有利，因为将有更快的初始渲染。但是，如果列表的任何部分发生更改，则将重新处理整个#list区域。

2）您有一个大型列表，在初始渲染后计划了许多更新。例如，具有许多可编辑字段列的网格。在这种情况下，你很多人都希望使用#each，即使它在初始渲染时速度较慢（我们正在设置更多绑定），你会有更快的更新，因为现在有很多部分

如果列表中包含内容的情况，请快速记录...，否则为空列表区域：

{{＃each items}} 循环列表项目！ {{/每}}

{{^ if items.length}} 显示是否没有物品！ {{/如果}}

以上应该考虑到这种情况。如果有其他逻辑，我会考虑编写一个自定义帮助器（取决于逻辑的样子）。