kendo mobile template

Example using a template with both ListView (ul) and div's

by jwstott

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.mobile.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<html>
<head>
    <title>test</title>
</head>
<body>
   
    <div data-role="view" id="listview-sample" 
        data-init="mobileListViewTemplatesInit" data-title="ListView">
            <div data-role="navbar">
                <span>Test Data / Template</span>

            </div>

        <!-- listview w/dataSource and template works -->            
        <span>ListView via constructor - works</span>
        <ul id="custom-listview"></ul>
            
        <hr/>

        <!-- generic template rendering does not -->
        <span>ListView via html - button not rendered</span>
            <br/>
        <div id="html-preview"  >
        </div>

    </div>
        
    <script type="text/x-kendo-template" id="customListViewTemplate">
        <li>
            <h2 class="item-title">${name}</h2>
            <p class="item-info">${description}</p>
            <a data-icon="bookmarks" data-role="button" >Order</a>
        </li>
    </script>
    
     <script type="text/x-kendo-template" id="customListViewTemplate2">
         # for(var i = 0, l = data.length; i < l; i++){ 
                  var item= data[i];       #
         <div>
            <span>${item.name}</span>
            <p >${item.description}</p>
            <a class="btnTest" data-icon="action" data-role="button" >Order</a>
         </div>
        #}#
    </script>
    
</body>
</html>

JavaScript

var app = new kendo.mobile.Application(document.body, {
    platform: "ios"
});

var menuData = [
    {
    name: "Sashimi Salad",
    description: "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.",
    url: "../../content/mobile/listview/sashimi-salad.jpg",
    letter: "S"},
{
    name: "Seaweed Salad",
    description: "A nice seaweed salad.",
    url: "../../content/mobile/listview/seaweed-salad.jpg",
    letter: "S"}
];


function mobileListViewTemplatesInit() {
    $("#custom-listview").kendoMobileListView({
        dataSource: new kendo.data.DataSource({data: menuData}),
        template: $("#customListViewTemplate").html()
    });
    
    var template = kendo.template($("#customListViewTemplate2").html());
    $("#html-preview").html(template(menuData));
    // ********************* this is key ***********************
    kendo.mobile.init($("#html-preview")); // you must init new widgets
    
};