Knockout 2.1 base + mapping

by nickkell

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<label>Account Number</label><input type="text" data-bind="value: edit.bank.accountNumber, valueUpdate: 'afterkeydown'" />

<input type="button" value="Change Bank Details" data-bind="click: copyBank" />
<br />
<label>Address</label><input type="text" data-bind="value: edit.billing.address1, valueUpdate: 'afterkeydown'" />
<input type="button" value="Change Billing Details" data-bind="click: copyBilling" />
<br />
<p data-bind="text: ko.toJSON($root)"></p>

JavaScript

function Model() {
    var self = this,
        details = {
            bank: {
                accountNumber: "1234124"
            },
            billing: {
                address1: "22 rymond road"
            }
        },
        update = function(ignore) {
            ko.mapping.fromJS(ko.mapping.toJS(self.edit), {
                ignore: ignore
            }, self.details);
        };

    self.details = ko.mapping.fromJS(details);
    self.edit = ko.mapping.fromJS(details);

    self.copyBilling = function() {
        update(['bank']);
    };

    self.copyBank = function() {
        update(['billing']);
    };

}

ko.applyBindings(new Model());