javascript - Knockout Search / Filter -

i'm new knockout js , i'm having hell of time trying project completed.

i've created map website displays series of pins on page popular locations around town. idea search bar left of page filter out pins on map names not match search query. there "master" list on left of page search bar filter too.

i used example found on jsfiddle here: http://jsfiddle.net/mythical/xjezc/ i'm having troubles applying same logic code.

here is:

html:

        <li>             <input class="form-control" placeholder="search…" type="search" name="filter" data-bind="value: query, valueupdate: 'keyup'" autocomplete="off">         </li>         <ul data-bind="template: {name:'pin', foreach: pins}"></ul>      </ul>  <script type="text/html" id="pin">     <li>         <strong data-bind="text: name"></strong>     </li> </script> 

js:

self.pins = ko.observablearray([   new self.mappin("anchorage alaska", 61.190491, -149.868937, "test1"),   new self.mappin("anchorage alaska", 61.190491, -149.868937, "test2") ]);  self.query = ko.observable('');  self.filterpins = ko.dependentobservable(function () {     var search = self.query().tolowercase();     return ko.utils.arrayfilter(name, function (pin) {         return pin.tolowercase().indexof(search) >= 0;     }); }); 

with logic i've setup if name removed pin constructor remove map.

here working example: http://jamesiv.es/projects/map/

html

<ul data-bind="template: {name:'pin', foreach: pins}"></ul>  

change

<ul data-bind="template: {name:'pin', foreach: filterpins}"></ul>  

javascript

self.filterpins = ko.dependentobservable(function () {     var search = self.query().tolowercase();     return ko.utils.arrayfilter(self.name, function (pin) {         return pin.tolowercase().indexof(search) >= 0;     }); }); 

change to

self.filterpins = ko.computed(function () {     var search = this.query().tolowercase();     return ko.utils.arrayfilter(self.pins(), function (pin) {         return pin.name().tolowercase().indexof(search) >= 0;     }); });