過濾數據foreach渲染視圖與選項下拉菜單，BatmanJS

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的選擇「項」的元素，並宣佈爲「顯示：無」，所以像

<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> s時被強制轉換爲字符串，因此如果key1不是字符串，則可能必須使用字符串屬性進行過濾。）