Knockout.Programmatic Template Example

Example use of nested templates with Knockout.Programmatic

HTML

<script src="https://raw.github.com/AdamPflug/Knockout.Programmatic/master/lib/jquery.tmpl-1.0.0pre.js"></script>
<script src="https://raw.github.com/AdamPflug/Knockout.Programmatic/master/lib/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/AdamPflug/Knockout.Programmatic/master/src/knockout.programmatic.js"></script>
<ul></ul>
<script id="itemsTmpl" type="text/html">
    <li class="item">${ name }
        <ul></ul>
    </li>
</script>
<script id="subItemsTmpl" type="text/html">
    <li>${ $data }</li>
</script>

CSS

ul {
    list-style: disc;  
}
li {
    margin-left: 20px;   
}

JavaScript

var viewModel = {
    list: [
        {name: 'one', subList: ['1-1', '1-2']},
        {name: 'two', subList: ['2-1', '2-2']},
        {name: 'three', subList: ['3-1', '3-2']}
    ]
};
$("ul").databind({
    template: {
        name: 'itemsTmpl',
        foreach: viewModel.list,
        afterRender: function (elements, data) {
            $(elements).find('ul').databind({
                template: {
                    name: "subItemsTmpl",
                    foreach: data.subList
                } 
            });
        }
    }
});