Question

我有一个现有的淘汰赛预告片如下：

<!-- 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绑定添加到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;
        });

});

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

淘汰foreach与where声明，是否可能

2 个答案: