4. Измение пола и поля фильтрации

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>
        <a href="#change" data-bind="text: gender, click: changeGender"></a>
        <span data-bind="text: name"></span>
    </li>
</script>
<table width="100%">
    <tr valign="top">
        <td width="50%">
            <label>
                <input type="radio" value="M" data-bind="checked: genderToFilter" />Males
            </label>
            <label>
                <input type="radio" value="F" data-bind="checked: genderToFilter" />Femails
            </label>
            <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);
    this.changeGender = function() {
        var g = this.gender() == 'F' ? 'M' : 'F';
        this.gender(g);
    }
};

var viewModel = {
    genderToFilter: ko.observable('M'),
    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() {
    var g = this.genderToFilter();
    return ko.utils.arrayFilter(this.persons(), function(p) {
        return p.gender() == g;
    });
}, viewModel);

ko.applyBindings(viewModel);