Binding to an hierarchy

Have a look at the JSON object below, it could be a list of categories and subcategories for a computer store.

var Categories = 
    [{"Name" : "Memory", 
             "Subcategories" : [{"Name" : "2 GB"},{"Name" : "3GB"},{"Name" : "4GB"}]}, 
     {"Name" : "Hard Drives", 
             "Subcategories" : [{"Name" : "250 GB"},{"Name" : "500 GB"},{"Name" : "500+ GB"}]} 
     {"Name" : "Graphics", 
             "Subcategories" : [{"Name" : "Integrated"},{"Name" : "Dedicated"}]}] 

The problem is that when we loop through the categories we want to loop through the subcategories as well. We do this with the context attribute. The repeater loops through each category and fills the template with the category information. When it comes to a 'context' attribute though it evaluates that against the current category and then loops through the result. The <li context='Subcategories'> is like a mini template inside the outer template. Inside this template ${Name} will refer not to the name of the category but the name of the Subcategory.

<ol id='CategoryList' > 
    <li>${Name} 
        <ol>
            <li context='Subcategories'>${Name}</li>
        </ol> 
    </li> 
</ol>

And our result is this