3. Фильтрация во viewModel

by romanych

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>
    </li>
</script>
<table>
    <tr valign="top">
        <td width="50%">
            <strong>Males</strong>
            <div data-bind="
            template: {
            name: 'PersonInfo',
            foreach: males
            }"></div>
        </td>
        <td>
            <strong>All</strong>
            <div data-bind="
            template: {
            name: 'PersonInfo',
            foreach: persons
            }"></div>
        </td>
    </tr>
</table>


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

viewModel.males = ko.dependentObservable(function() {
    return ko.utils.arrayFilter(this.persons(), function(p) {
        return p.gender() == 'M';
    });
}, viewModel);

ko.applyBindings(viewModel);