Question

你能否找到我对这个数组过滤器做错的事情。小提琴Here

我一直在努力，并且进展非常缓慢。我检查了很多样本，但无法找到我的问题。

由于

 //This is the part I'm not able to fix
    self.filteredPlaces = ko.computed(function() {
      var filter = self.filter().toLowerCase();
      if (!filter) {
        ko.utils.arrayForEach(self.placeList(), function (item) {
        });
        return self.placeList();
      } else {
        return ko.utils.arrayFilter(self.placeList(), function(item) {
          var result = (item.city().toLowerCase().search(filter) >= 0);
          return result;
        });
      }
    });

Answer 1

您没有将filter数据绑定到任何输入。您使用了query代替。

更改过滤器值以使用query observable：

var filter = self.query().toLowerCase();

Answer 2

我想我知道你要完成什么，所以我会开枪。这段代码有一些问题。

淘汰赛中的foreach接受数组而不是函数。

http://knockoutjs.com/documentation/foreach-binding.html
我认为你试图隐藏搜索框中不包含文字的条目。为此，您需要可见的绑定。我将您的代码重新考虑在下面的示例中。
```
<div data-bind="foreach: placeList" class="alignTextCenter">
    <p href="#" class="whiteFont" data-bind="text: city, visible: isVisible"></p>
</div>
```

我将isVisible添加为数组中的项目，并在类中添加了一个observable。

var initialPlaces = [
  {"city":"Real de Asientos","lat":22.2384759,"lng":-102.089015599999,isVisible:true},
  {"city":"Todos Santos","lat":23.4463619,"lng":-110.226510099999,isVisible:true},
  {"city":"Palizada","lat":18.2545777,"lng":-92.0914798999999,isVisible:true},
  {"city":"Parras de la Fuente","lat":25.4492883,"lng":-102.1747077,isVisible:true},
  {"city":"Comala","lat":19.3190634,"lng":-103.7549847,isVisible:true},
];

var Place = function(data) {
  this.city = ko.observable(data.city);
  this.lat = ko.observable(data.lat);
  this.lng = ko.observable(data.lng);
  this.isVisible = ko.observable(data.isVisible);
};

最后，您要订阅“查询”的更改，因为它位于文本框中，以便在文本框更改时列表更新。这是我小提琴中的self.query.subscribe行。我为格式化道歉，我多次试过，无法让它工作。

Working fiddle here

使用knockout过滤可观察数组

2 个答案: