knockout template binding

by bakhshi

HTML

<ol class="container" data-bind="template:{name:'listtemplate', data:$data}">
    
</ol>

<script type="text/html" id="listtemplate">
    <!--ko foreach:listitems -->
        <li>
            <!--ko if:$data.IsComplex-->
            <ol data-bind="template:{name:'listtemplate', data:$data}"></ol>
            <!--/ko-->
            <!--ko if:!($data.IsComplex)-->
            <span data-bind='text:$data'></span>            
            <!--/ko-->
        </li>
    <!--/ko-->
</script>

JavaScript

function createList(name){
    return {
        Name: name,
        IsComplex:true,
        listitems:[]
    }
}

var model = createList("Topmost");
model.listitems.push("first");
model.listitems.push('second');
var inner;
model.listitems.push(inner = createList("inner"))
inner.listitems.push('third>first');
inner.listitems.push('third>second');
inner.listitems.push('third>third');
inner.listitems.push(inner = createList('innermost'));

inner.listitems.push("inner most>first");
inner.listitems.push("inner most>second");
inner.listitems.push("inner most>third");
inner.listitems.push("inner most>forth");

ko.applyBindings( model);