过滤功能：使用KO挣扎答案

【问题标题】：Filtering function: use KO struggling过滤功能：使用KO挣扎
【发布时间】：2016-11-13 07:50:17
【问题描述】：

尝试转换这段代码：

JS：

self.filter = function() {
    var s = $('#searchField').val();
    console.log(s.toLowerCase().replace(/\b[a-z]/g,"KC"));
    s = s.toLowerCase().replace(/\b[a-z]/g, function(self) {
      console.log(self.toUpperCase());
      return self.toUpperCase();
    });
    $(".locationList > li").each(function() {
      console.log(this);
      $(this).text().search(s) > -1 ? $(this).show() : $(this).hide();
    });
    for(var i = 0; i < self.placeList().length; i++) {
      console.log(self.map);
      self.placeList()[i].marker.setMap(self.placeList()[i].marker.title.search(s) > -1 ? map : null);
    }
  };
};

HTML：

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<input id="searchField" data-bind="event: {keyup: filter}" type="text" placeholder='search by name or city' value="">
<hr>
<ul class="locationList" data-bind="foreach: placeList">
  <li>  
    ...

到这样的事情：

Javascript

self.filterText = ko.observable("");
self.filteredList = ko.computed(function(){
  var filter = self.filterText().toLowerCase();
  return // your filter function. make sure you return an array of what you want! 
}, this);

【问题讨论】：

标签： javascript jquery html knockout.js

【解决方案1】：

您应该在中继器的 li-tag 上使用可见绑定。然后直接隐藏不符合标准的项目。像这样的：

<ul data-bind="foreach:placeList">
  <li data-bind="text:$data, visible: filter"></li>
</ul>

【讨论】：