Filterfunktion: Verwenden Sie KO

Question

Versuchen zu kämpfen diesen Code zu konvertieren:

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> 
    ... 

etwas wie folgt aus:

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); 

Answer 1

Sie sollten die sichtbare Bindung auf dem li-Tag in Ihrem Repeater verwenden. Dann ist es einfach, Gegenstände zu verstecken, die die Kriterien nicht erfüllen. Etwas wie dieses:

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