//案例视图模型
function viewModel() {
    var model = this;

    //使用ko.observable将实体对象监控起来
    this.entity = ko.observable()

    //注册一个用来将entity转换为viewModel的listener
    this.entity.subscribe(function (newValue) {
                    
        //判断属性children是否已经被监控
        if (newValue && !ko.isObservable(newValue.children)) {
            //将children属性转为监控对象
            newValue.children = ko.observableArray(newValue.children || []);
            //将name属性转换为监控对象
            newValue.name = ko.observable(newValue.name);
        }
    });
}

//实体对象生成的字符串，并来在页面上同步展示View发生的变化
this.json = ko.computed(function () {
    return ko.toJSON(model.entity);
});

<div id="case" data-bind="with:entity" style="padding-left:25px;">
    <div>
        <label>名称：</label>     
        <input data-bind="value: name" />           
    </div>
    <div>
        <label>子级：</label>
        <ul style="display:inline-block">
            <!-- ko foreach:children -->
            <li data-bind="text:$data"></li>
            <!-- /ko -->
            <li>
                <input data-bind="value:$root.newChildName" />
                <input data-bind="click:$root.addChildEventHandle" type="button" value="增加" />
            </li>
        </ul>
    </div>
    <div style="margin-top:50px;">
        <label>json：</label>
        <label data-bind="text:$root.json"></label>
    </div>
</div>

var model = new viewModel();

model.entity({
    name: '张三',
    children: [
        '狗子',
        '二蛋'
    ]
});

ko.applyBindings(model, document.getElementById('case'));