javascript - 内部过滤器在 Knockout JS 中无法正常工作

Question

我有大小为 3 的静态数据数组。

我在右侧显示数组。

其上方有一个用于过滤的文本框。我为它拿了2个模型。

第一个是字段，第二个是子字段。

一个字段可以有多个子字段。我正在对字段以及子字段进行过滤。它适用于字段，但显示了子字段上的一些异常输出。只有一个条件，如果字段的过滤数据添加到数组中，那么它不应该进入子字段，如果在字段中没有找到匹配，那么它可以进入子字段 然后将数据添加到过滤后的数组中。

我的fiddle

Answer 1

问题出在您用于过滤数据的情况下。由于您有两个以上的子字段，因此对于子字段的每个匹配项，将相同的数据推送到 arr 中，这是获得意外结果的主要原因。

 self.filteredList = ko.computed(function() {
  var filter = self.filter(),
  arr = [];
if (filter) {
  ko.utils.arrayForEach(self.controlFields(), function(item) {
    if (item.code().match(filter) || item.title().toLowerCase().match(filter.toLowerCase())) {
      arr.push(item);
    }
      ko.utils.arrayForEach(item.subFields(), function(sf) {
        if (sf.title().toLowerCase().match(filter.toLowerCase())) {
          var found = ko.utils.arrayFirst(arr, function(k) {
            return item.title() === k.title() && item.code()===k.code();
          });
          if (!found) {
            arr.push(item);
          }
        }
      });

   });
  } else {
   arr = self.controlFields();
  }
 return arr;
});

Demo