Kendo UI Templates

example using repeating and non-repeating elements in single template

by David McClelland

HTML

<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<div id="results">
</div>

<script type="text/x-kendo-template" id="temp">
    <div>
        <h1 class='header'>#= header #</h1>
        <h2 class='header2'>#= header2 #</h2>
        <ul>
            # for(var i = 0, l = list.length; i < l; i++){#
            <li class='item'>#= list[i] #</li>
            #}#
        </ul>
    </div>
</script>

JavaScript

window.sharedVariables = {
   header: "Header",
   header2: "Header2",
   list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };

window.kendouiTemplate = kendo.template($("#temp").html(), {useWithBlock:true});

$("#results").html(window.kendouiTemplate(sharedVariables));