knockout.js - 用where语句 knockout foreach，是否可行

Question

我有一个现有的 foreach knockout ，如下所示:

<!-- ko foreach: reportFields -->
<tr>
   <td><span class="hover" data-bind="text: FriendlyName, click:$parent.openField"></span></td>
   <td><img src="img/cross.png" data-bind="click: $parent.removeField" class="delete" alt="Remove Field" title="Remove Field" /></td>
</tr>
<!-- /ko --> 

我需要做的是进一步过滤 foreach，即我想检查每个项目的字段以查看它是否等于 1、2 或 3。我尝试简单地在 ko foreach 之后直接放置一个 knockout if 语句，但它失败了工作，除非我把它放在一些 html 代码之后，这是一个问题，因为我不想显示任何东西，除非它匹配。

所以我的问题是我可以用 where 语句或类似的东西以某种方式过滤 ko foreach，或者有没有办法让 if 语句运行而不需要在声明它之前有 html？

Answer 1

您可以将 if 绑定(bind)添加到 tr 元素:

<!-- ko foreach: reportFields -->
<tr data-bind="if: SomeField() == 1">
   <td><span class="hover" data-bind="text: FriendlyName, click:$parent.openField"></span></td>
   <td><img src="img/cross.png" data-bind="click: $parent.removeField" class="delete" alt="Remove Field" title="Remove Field" /></td>
</tr>
<!-- /ko --> 

或者您可以在 View 模型中创建一个计算值，它将存储过滤后的数组并在foreach中使用它:

self.filteredItems = ko.computed(function() {
        return ko.utils.arrayFilter(self.reportFields(), function(item) {
            return item.someField() == 1;
        });

});