Data binding of checkboxes list

by alekskorovin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div id="list">
    <!-- ko foreach: checkboxes -->
    <label>
        <input type="checkbox" data-bind="checked: checked" />
    </label>
    <!-- /ko -->
    <button data-bind="click: $root.showResults.bind($data)">Show result</button>
</div>

JavaScript

(function () {
    var dataSet = [{
        checked: true
    }, {
        checked: false
    }, {
        checked: true
    }];

    var Model = function (data) {
        this.checkboxes = ko.observableArray();

        this.showResults = function (data) {
            console.log(data.checkboxes()[0].checked());
            console.log(data.checkboxes()[1].checked());
            console.log(data.checkboxes()[2].checked());
        };

        this.update(data);
    };

    Model.prototype.update = function (data) {
        var that = this;

        this.checkboxes = ko.mapping.fromJS(data);
    };

    var model = new Model(dataSet);
    ko.applyBindings(model, document.getElementById('list'));

}());