Question

我只是试图操纵蝙蝠侠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"

但是我有点陷入困境，想知道是否有办法用蝙蝠侠过滤器处理这个问题。有什么建议吗？

Answer 1

您可以使用data-showif绑定仅显示已选中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>时，它们会被强制转换为字符串，所以如果{ {1}}不是字符串，您可能必须使用字符串属性进行过滤。）

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

1 个答案: