使用选项下拉列表过滤 data-foreach 渲染视图，BatmanJS答案

【问题标题】：Filtering data-foreach rendering view with option dropdown, BatmanJS使用选项下拉列表过滤 data-foreach 渲染视图，BatmanJS
【发布时间】：2014-07-25 11:00:03
【问题描述】：

我只是试图操纵由 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>

我非常迷茫如何解决这个问题。我最初的想法是使用咖啡脚本来选择“项目”元素并声明为“显示：无”，所以类似于

<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"

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

【问题讨论】：

标签： javascript html model-view-controller coffeescript batman.js

【解决方案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>s 时，它们会被强制转换为字符串，所以如果 key1 不是字符串，您可能必须使用字符串属性进行过滤。）

【讨论】：