当我有一个空数组作为我的 check.bind 时，如何创建一个 select 全部复选框

Question

我有一个带有复选框的表格作为第一列。 我想在 header 中有一个 select all 复选框。 我不确定如何解决这个问题。

<template>
  <table class="table table-hover">
      <thead>
        <tr>
          <th><input type="checkbox" /></th>
          <th>ID</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" checked.bind="selected" model.bind="site" /></td>
          <td>${site.id}</td>
        </tr> 
      </tbody>
    </table>  
</template>

Answer 1

因此，解决此问题的最佳方法包括三个部分。 我们需要绑定checked属性和indeterminate属性，并且需要处理change事件。

首先，我们希望在所选数组包含items数组中的所有项目时selected复选框。 所以：

<input type="checkbox" checked.bind="selected.length === items.length" />

This checks the checkbox whenever all items are selected, but checking the checkbox has no effect on the selected array yet.

接下来，只要selected数组在items数组中有一些但不是所有项，我们希望复选框是不确定的。 所以：

<input type="checkbox 
  checked.bind="selected.length === items.length"
  indeterminate.bind="selected.length > 0 && selected.length < items.length" />

现在，该复选框完全反映了selected阵列的 state，但仍然对selected阵列没有影响。

最后，我们可以在复选框被选中或取消选中时监听复选框上的change事件以更新selected数组。 我在下面使用了一个内联处理程序，在这个处理程序中$event.target是复选框本身。

<input type="checkbox"
  checked.bind="selected.length === items.length"
  indeterminate.bind="selected.length > 0 && selected.length < items.length"
  change.delegate="$event.target.checked ? selected = items.slice() : selected = []" />

此时，复选框工作正常。 Checked 通常是一种双向绑定，但在我们上面的示例中，它只是单向操作。 我们可以做这个小优化：

<input type="checkbox"
  checked.one-way="selected.length === items.length"
  indeterminate.one-way="selected.length > 0 && selected.length < items.length"
  change.delegate="$event.target.checked ? selected = items.slice() : selected = []" />

有关工作示例，请参阅此gist.run：https://gist.run/?id=61cc823708ff7f6ba195de9ff0353049

请注意，我通常发现创建一个封装此行为的自定义元素很有用。