Kendo Nested Templates w/collection

Nested client template for Kendo UI with child collection.

by gxclarke

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id='listview'>
</div>

<script id="customer-template" type="text/x-kendo-template">
<span>
     <h2>${customerName}</h2>
     #= renderNotesTemplate(data) #
</span>
</script>

<script id="notes-template" type="text/x-kendo-template">
    # $.each(data.notes, function (index, item) {
           # <p>${item}</p>  #                        
      }); 
    #
</script>

JavaScript

var data = kendo.observable({
    customers: [{
        customerName: "Bob",
        notes: [
            "Wants his order by Saturday",
            "Can't wait until Sunday"
        ]
    },{
        customerName: "Jim",
        notes: [
            "Owes us $300",
            "Other random note"
        ]
    },{
        customerName: "Anton",
        notes: [
            "2 items outstanding on last order",
            "Doesn't like peaches",
            "Owns a black labrador"
        ]
    }]
});

function renderNotesTemplate(data) {
    return kendo.Template.compile($('#notes-template').html())(data);
}

$('#listview').kendoListView({
    dataSource:{data:data.customers},
    template: kendo.template($('#customer-template').html())
});