Kendo UI Template onLoad and button

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

by David McClelland

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>
<input type="text" id="blog-title" value="Demo Title" class="k-textbox" />
<label for="blog-content">Content:</label>
<textarea id="blog-content" rows="4" cols="60" class="k-textbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
<button id="render" class="k-button">Re-render Template</button><p>&nbsp;</p>

<div id="blog-preview"></div>

<script type="text/x-kendo-template" id="template">
    <h3 class="k-widget k-header">#= title #</h3>
    <article> 
    <p>#= content #</p>
    </article>
</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

var operation = [{multiply:"*"},{add:"+"}]; 

    var template = kendo.template($("#template").html());

    function renderTemplate() {
        $("#blog-preview").html(template({
            title: $("#blog-title").val(),
            content: $("#blog-content").val()
        }));
    }

    renderTemplate();

    $("#render").click(renderTemplate);