使用knockout过滤可观察数组

Posted 2021-05-05

你能否找到我对这个数组过滤器做错的事情。小提琴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;
        });
      }
    });

答案

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

1. 淘汰赛中的foreach接受数组而不是函数。 http://knockoutjs.com/documentation/foreach-binding.html
2. 我想你正试图隐藏不包含搜索框中文本的条目。为此，您需要可见的绑定。我将您的代码重新考虑在下面的示例中。 <div data-bind="foreach: placeList" class="alignTextCenter"> <p href="#" class="whiteFont" data-bind="text: city, visible: isVisible"></p> </div>
3. 我将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); };

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

Working fiddle here

另一答案

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

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

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