Controlling how an object is converted to JSON

http://www.knockmeout.net/2011/04/controlling-how-object-is-converted-to.html

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<ul data-bind="template: { name: 'peopleTmpl', foreach: ones}"></ul>
<hr/>
<div data-bind="text: ko.toJSON(ones)"></div>
<hr/>

<script id="peopleTmpl" type="text/html">
    <li>
        <input data-bind="value: first" />
        <input data-bind="value: last" />
        <span data-bind="text: first.full"></span>
    </li>
</script>

CSS

input { width: 75px; }

JavaScript

function PersonOne(first, last) {
    this.first = ko.observable(first);
    this.last = ko.observable(last);

    this.first.full = ko.computed(function() {
        return this.first() + " " + this.last();
    }, this);
}

var viewModel = {
    ones: [
        new PersonOne("John", "Smith"),
        new PersonOne("Sarah", "Smith"),
        new PersonOne("Ron", "Smith")
        ]
};

ko.applyBindings(viewModel);