javascript - 使用选项下拉列表过滤数据 foreach 渲染 View ，BatmanJS

Question

我只是想操纵 Batman JS 填充的表来过滤掉带有下拉选项框的条目。

(html查看代码)

<select data-bind="itemvalue">
  <option
    data-foreach-item="items"
    data-bind="item.key1"
    data-bind-value="item.key1"
    >
  </option>
</select>

<table>
  <tr class="key">
    <th class="label" data-bind="keys.key1"></th>
    <th class="label" data-bind="keys.key2"></th>
    <th class="label" data-bind="keys.key3"></th>
  </tr>
  <tr class="item" data-foreach-item="items">
    <td class="name" data-bind="item.key1"></td>
    <td class="number1" data-bind="item.key2"></td>
    <td class="number2" data-bind="item.key3"></td>
  </tr>
</table>

我对如何解决这个问题感到非常困惑。我最初的想法是使用 CoffeeScript 来选择“item”元素并声明为“display:none”，所以类似于

<option ... onchange="filterView>

//and from coffeescript

filterView = (obj) ->
selectedValue = obj.options[obj.selectedIndex].value;
temp = document.getElementsByClassName("item")
for element in temp
  name = getElementsByClassName("name").innerHTML
  if name isnt selectedValue
    element.style.display == "none"

但我现在有点卡住了，想知道是否有任何方法可以用 bat 侠过滤器来处理这个问题。有什么建议吗？

Answer 1

您可以使用data-showif绑定(bind)为仅显示 item.key1 的行被选中。

当您从下拉列表中选择一个项目时，其 key1设置为itemvalue ，所以你也许可以检查一下:

<tr data-foreach-item="items" data-showif='item.key1 | equals itemvalue'>
  <td class="name" data-bind="item.key1"></td>
  <td class="number1" data-bind="item.key2"></td>
  <td class="number2" data-bind="item.key3"></td>
</tr>

(根据我的经验，你必须对 DOM 中的非字符串小心一些。当它们渲染到 <option> 时，它们会被强制转换为字符串，所以如果 key1 不是字符串，您可能必须使用字符串属性进行过滤。)