Kendo Nested Templates w/collection

Nested client template for Kendo UI with child collection.

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>
     #= renderRecordProperties(data) #
</span>
<hr>
</script>

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

JavaScript

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

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

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