Knockout Custom Mapping

Demonstrates how to add computed observable to observable arrays generated by the kn.mapping plugin

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<ul data-bind="foreach:mappedOrders">
    <li><span data-bind="text:FirstName"></span>
    </li>
</ul>

<textarea data-bind="text:ko.toJSON(mappedOrders)"></textarea><br/>
<textarea data-bind="text:ko.toJSON(unmappedOrders)"></textarea>

JavaScript

var data = [{
    OrderID: '1',
    FirstName: 'Bob',
    LastName: 'Stevens'
}, {
    OrderID: '2',
    FirstName: 'Jim',
    LastName: 'Johnson'

}];


function order(data) {
    ko.mapping.fromJS(data, {}, this);
    this.FullName = ko.computed(function () {
        return this.FirstName() + ' ' + this.LastName();
    }, this);
}

var mapping = {
    create: function (options) {
        return new order(options.data);
    }
};

function viewModel() {
    var self = this;
    self.mappedOrders = ko.mapping.fromJS(data, mapping);
    self.unmappedOrders = ko.mapping.toJS(self.mappedOrders);
}

var vm = new viewModel();

ko.applyBindings(vm);