KnockoutJS and Recursive Template

http://stackoverflow.com/questions/8231888/knockoutjs-and-recursive-template

by rniemeyer

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<ul class="nav"  data-bind="template: {name: 'categories_template', foreach: categories}"></ul>

<script type="text/html" id="categories_template">
    <li id="category_${Id}" class="category_header">${Name}
       {{if $data.HasChildren }}
            <ul data-bind='template: { name: "categories_template", foreach: Children}'>
            </ul>
       {{/if}}
    </li>  
</script>

CSS

ul { margin-left: 10px; }

JavaScript

var viewModel = {
    categories: [
        { Id: 1, Name: "One", HasChildren: true, Children: [{ Id: 3, Name: "One1", HasChildren: false }, { Id: 4, Name: "One2", HasChildren: false} ]},
        { Id: 2, Name: "Two", HasChildren: true, Children: [{ Id: 5, Name: "Two1", HasChildren: false }, { Id: 6, Name: "Two2", HasChildren: false} ]}
       ] 
};
        
ko.applyBindings(viewModel);