2. Функция фильтрации указывается непосредственно во view
HTML
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<script type="text/html" id="PersonInfo">
<li>
<span data-bind="text: gender"></span>
<span data-bind="text: name"></span>
<small data-bind="text: new Date()"></small>
<a href="#remove" data-bind="click: function() { viewModel.removePerson($data); }">x</a>
</li>
</script>
<div data-bind="
template: {
name: 'PersonInfo',
foreach: ko.utils.arrayFilter(
persons(),
function(p){ return p.gender() == 'M';}
)}"></div>
<a href="#add-male" data-bind="click: addMale">Add male</a>
<a href="#add-male" data-bind="click: addFemale">Add female</a>
JavaScript
var Person = function(gender, name) {
this.gender = ko.observable(gender);
this.name = ko.observable(name);
};
var viewModel = {
persons: ko.observableArray([
new Person('M', 'John Smith'),
new Person('M', 'Mr. Sanderson'),
new Person('F', 'Mrs. Sanderson'),
new Person('M', 'Agent Ralf'),
new Person('F', 'Gangretta Peterson')
]),
addMale: function() {
this.persons.push(new Person('M', 'New male'));
},
addFemale: function() {
this.persons.push(new Person('F', 'New female'));
},
removePerson: function(person) {
this.persons.remove(person);
}
};
ko.applyBindings(viewModel);