1

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

<!-- 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？

4

2 回答 2

4

您可以将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;
        });

});
于 2012-10-29T10:13:51.350 回答
0

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

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">而不是虚拟元素。

于 2012-10-29T10:15:16.330 回答