knockout.advanced createObservableIfNotExists example

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<script src="https://raw.github.com/alekzonder/knockout.advanced/master/knockout.advanced.js"></script>
id: <input data-bind="value: ko.advanced.createObservableIfNotExists('test().id', $root)"/><br/>
name: <input data-bind="value: ko.advanced.createObservableIfNotExists('test().name', $root)" /><br/>
desc: <input data-bind="value: ko.advanced.createObservableIfNotExists('test().desc', $root)" />

<h4>Options</h4>
<ul>
    <li data-bind="text: ko.advanced.createObservableIfNotExists('test().options().option1', $root)"></li>
    <li data-bind="text: ko.advanced.createObservableIfNotExists('test().options().option2', $root)"></li>
    <li data-bind="text: ko.advanced.createObservableIfNotExists('test().options().option3', $root)"></li>
</ul>

<input type="checkbox" data-bind="checked: ko.advanced.createObservableIfNotExists('test().checked', $root)" />
    
<hr/>
<div data-bind="text: ko.toJSON(viewModel.test) "></div>

CSS

input { margin: 2px; }

JavaScript

var viewModel = {};
    
ko.applyBindings(viewModel);

var serverUpdate = {
    id: 1, 
    name: 'test', 
    desc:'desc', 
    checked: 1,
    options: {
        option1: 'option1',
        option2: 'option2'
    }};

ko.mapping.fromJS(serverUpdate, {}, viewModel.test);