Kendo UI Mobile base

by valchev

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">
            <li>
                <li class="km-group-container">
                    <div class="km-group-title">
                        <div class="km-text" data-template="gasListTemplateHeader" data-bind="source: count"></div>
                    </div>
                </li>
                <ul data-role="listview" data-template="gasListTemplate" data-bind="source: items">
                </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">
    Found #= count # items
</script>

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

JavaScript

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

new kendo.mobile.Application();