jQuery on and off with Templates

Demonstrate template events that persist after a template is refreshed.

by Josh Eastburn

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
<div id="main">
    <button id="addButton">Add Item</button>
    <button id="removeButton">Remove Item</button>
    <div data-role="listview" data-bind="source: itemData" data-template="item-template"></div>
    <div id="log"></div>
</div>
<script id="item-template" type="text/x-kendo-template">
    <div><button class="print-log">Log</button></div>
</script>

CSS

.log {
    background-color: #eee;
    margin: 20px 0;
}

JavaScript

(function () {
    var log = (function (el) {
        return function (text) {
            el.html(el.html() + '<br/>' + text);
        };
    })($('#log'));

    var addItem = function () {
        viewModel.itemData.push(1);
    }

    var removeLast = function () {
        viewModel.itemData.pop();
    }

    var printLog = function () {
        log(new Date());
    }

    $('#addButton').on('click', addItem);
    $('#removeButton').on('click', removeLast);
    $('#main').on('click', '.print-log', printLog);

    var viewModel = kendo.observable({
        itemData: [1,3,6,7,8]
    });


    kendo.bind('#main', viewModel);

})()