用where语句淘汰foreach，有可能吗答案

【问题标题】：Knockout foreach with where statement, is it possible用where语句淘汰foreach，有可能吗
【发布时间】：2012-10-29 18:15:16
【问题描述】：

我有一个像这样的现有淘汰赛：

<!-- 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 之后直接放置一个剔除 if 语句，但它失败了除非我把它放在一些 html 代码之后才能工作，这是一个问题，因为我不想显示任何东西，除非它匹配。

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

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以将if 绑定添加到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 -->

或者您可以在视图模型中创建一个computed value，它将存储filtered array 并在foreach 中使用它：

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

});

【讨论】：

【解决方案2】：

您可以使用计算的可观察数组。

function ReportViewModel() {
  this.reportFields = ko.observableArray(...);
  this.reportFilter = ko.observable();  // bind to dropdown with values 1, 2 or 3

  this.reportFieldsFiltered = ko.computed(function () {
    var filterValue = this.reportFilter();

    return ko.util.arrayFilter(this.reportFields(), function (item) {
      return item.property() == filterValue;
    });
  }, this);
}

然后使用

<!-- ko foreach: reportFieldsFiltered -->
<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 -->

顺便说一句，您可以只使用<tbody data-bind="foreach: reportFieldsFiltered"> 而不是虚拟元素。

【讨论】：