I find it difficult to work with a filter. I roughly follow the example of http://www.knockmeout.net/2011/06/10-things-to-know-about-knockoutjs-on.html , but I just can't get it to work. Any help is appreciated.
HTML:
<h1><b>Medical Product Survey</b></h1> <div class='facilities available'> <div class='bar'> <h2>Hospitals / Facilities</h2> <a class='button add'>+</a> </div> <table> <thead> <tr> <th> <input data-bind="value: filter, valueUpdate: 'afterkeydown'" /> </th> <th>Modified</th> <th>Status</th> </tr> </thead> <tbody data-bind="template: { name: 'facilitiesAvailableRow', foreach: filteredFacilties }"></tbody> </table> <script type="text/html" id="facilitiesAvailableRow"> <tr> <td>${name}</td> <td>${modified}</td> <td>${status}</td> </tr> </script> </div> <div class='facilities available'> <div class='bar'> <h2>Archived</h2> </div> <table> <thead> <tr> <th><input type='search' id='facility_search' /></th> <th>Archive Date</th> <th>Size</th> <th></th> </tr> </thead> <tbody data-bind="template: { name: 'facilitiesArchivedRow', foreach: facilitiesArchived }"></tbody> </table> <script type="text/html" id="facilitiesArchivedRow"> <tr> <td>${name}</td> <td>${modified}</td> <td>${size}mb</td> <td><input type='button' value='restore' /></td> </tr> </script> </div>
JavaScript:
//Model for facilities interaction on the front page. var viewModel = { facilitiesAvailable: ko.observableArray([ { name: "Test 1", modified: "1/20/1986", status: "Good to go" }, { name: "Test 2", modified: "1/21/1987", status: "Good to go2" }, { name: "Test 3", modified: "1/22/1988", status: "Good to go3" }, { name: "Test 4", modified: "1/23/1989", status: "Good to go4" }, { name: "Test 5", modified: "1/24/1990", status: "Good to go5" } ]), facilitiesArchived: ko.observableArray([ { name: "Archive 1", modified: "1/20/1982", size: 123 }, { name: "Archive 2", modified: "1/21/1983", size: 198 }, { name: "Archive 3", modified: "1/22/1984", size: 340 } ]), filter: ko.observable(""), }; //Filtering. viewModel.filteredFacilities = ko.dependentObservable(function() { var filter = this.filter().toLowerCase(); if(!filter) { return this.facilitiesAvailable(); } else { return ko.utils.arrayFilter(this.facilitiesAvailable(), function(item) { if(item.name.toLowerCase().search(filter) != -1) { return true; } }); } }, viewModel); ko.applyBindings(viewModel);
The error I am getting is:
Uncaught Error: Unable to parse binding attribute. Message: ReferenceError: filteredFacilties is not defined; Attribute value: template: { name: 'facilitiesAvailableRow', foreach: filteredFacilties }