Recursive knockout template with ko.mapping

by bradleytrager

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script id="formElementNodeTemplate" type="text/html">
<ul>
    <li>Parent <span data-bind="text: text"></span> <span data-bind="text: value"></span>
        <br/>
      Children:
        <!-- ko template: { name: 'formElementNodeTemplate', foreach: children } -->
        <!-- /ko -->        
     </li>
   </ul>
</script>    

 <div data-bind="template: { name: 'formElementNodeTemplate', data: $data }"></div>

JavaScript

var formElementNode = {
    children: [{
        children: [],
        text: 'Child1',
        value: 'Value1'
    }, {
        children: [{
            children: [{
                children: [],
                text: 'Child2.1.1',
                value: 'Value2.1.1'
            }],
            text: 'Child2.1',
            value: 'Value2.1'
        }],
        text: 'Child2',
        value: 'Value2'
    }, {
        children: [],
        text: 'Child3',
        value: 'Value3'
    }],
    text: 'Main',
    value: 'MainValue'
};

var viewModel = ko.mapping.fromJS(formElementNode);
ko.applyBindings(viewModel);