Kendo UI Template Javascript

http://davidjmcclelland.com/etc/?p=2210

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<button id="renderJs" class="k-button">Render List Using JavaScript Template</button><p>&nbsp;</p>
<button id="renderScript" class="k-button">Render List Using Script Template</button><p>&nbsp;</p>
<div id="listView">
</div>
<!-- put contents of this template into JavaScript declared one -->
    <script id="scriptTemplate" type="text/x-kendo-template">
        <ul style="color:red;">
        # for (var i = 0; i < data.length; i++) { #
            <li>#= data[i] #</li>
        # } #
        </ul>
        <div>
       testFunction()
        </div>
    </script>

CSS

#panel
    {
        background-image: none;
        margin: -16px 0 30px;
        padding: 30px 0 25px;
    }

    #panel input,
    #panel textarea
    {
        font: inherit;
        margin: -5px 0 5px;
    }

    #exampleWrap ul h3
    {
        margin-bottom: 0.6em;
        padding: 0;
    }

    #exampleWrap ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #example ul label
    {
        display: inline-block;
        vertical-align: top;
        width: 110px;
        padding: 0 8px;
        text-align: right;
    }

    #preview
    {
        margin-left: 129px;
    }

    #preview
    {
        height: 26px;
        width: 140px;
    }

    #example li
    {
        margin: 0.4em 0;
    }

    #example h3.k-header
    {
        margin: 1.4em 0 1em;
        padding: .4em 1.4em;
        font-size: 1.4em;
        border-radius: 2px;
    }

    #blog-content
    {
        height: 100px;
    }

    #blog-preview
    {
        width: 84%;
        margin: 0 auto 40px;
    }

    #blog-preview img
    {
        float: left;
        margin: 0 14px 0 0;
        border: 3px solid #dedede;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

    #blog-preview h4
    {
        font-size: 10px;
        font-weight: normal;
        text-transform: uppercase;
        color: #8d8d8d;
        margin-top: 0;
        border-bottom: 1px solid #dedede;
    }

    #blog-preview h4 strong
    {
        color: #ed662e;
    }

    #blog-preview p,
    #blog-preview h4
    {
        margin-left: 93px;
    }

JavaScript

$(document).ready(function(){

   var data = ["Able", "Ben", "Conn"]; 
    var jsTemplate = kendo.template("<ul style='color:blue;'> # for (var i = 0; i < data.length; i++) { # <li>#= data[i] #</li> # } # </ul>");
   var scriptTemplate = kendo.template($("#scriptTemplate").html());
    
    function renderJsTemplate() {
        $("#listJsView").html(JsTemplate(data));
    }
    
    function renderScriptTemplate() {
        $("#listView").html(scriptTemplate(data));
    }
    $("#renderScript").click(renderScriptTemplate);
    
    function renderJsTemplate() {
        $("#listView").html(jsTemplate(data));
    }
    $("#renderJs").click(renderJsTemplate);
    
    function testFunction() {
     return "testinggggg";
    }
});