Kendo UI Mobile base

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.mobile.all.min.css">
    <div data-role="view" id="foo" data-model="vm">
        <h1>Templates & Data Binding</h1>
        <ul data-role="listview" data-style="inset" data-type="group" data-header-template="gasListTemplateHeader" >
            <li>
                <ul data-role="listview" data-template="gasListTemplate" data-bind="source: items" template="gasListTemplateHeader">
                </ul>
            </li>
        </ul>        
        
        <h1>Desired Look</h1>
        <ul data-role="listview" data-style="inset" data-type="group">
            <li>
                Found 2 items
                <ul>
                    <li>value 1</li>
                    <li>value 2</li>                    
                </ul>
            </li>
        </ul>
    </div>

<!-- I can't seem to get this to appear anywhere, perhaps I use it incorrectly -->
<script type="text/x-kendo-template" id="gasListTemplateHeader">
    Hello
</script>

<script type="text/x-kendo-template" id="gasListTemplate">
    #=value#
</script>

JavaScript

var vm = new kendo.data.ObservableObject({ 
    items:[{
        name: "item1",
        value: "value1"
    },{
        name: "item2",
        value: "value2"
    }]
});

new kendo.mobile.Application();