Kendo UI

jQuery + Kendo UI + MockJax

by burkeholland

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<script src="https://raw.github.com/burkeholland/kendo-plugins/master/DataSource/kendo.repeater.js"></script>
<label for="newItem">Enter A New Item</input>
        <input id="newItem" data-bind="value: newItem" class="k-input" />
        <button class="k-button" data-bind="click: add">Add Item</button>
        
        <div id="repeater"></div>
        
        <div data-role="repeater" data-bind="source: items" data-template="template"></div>
        
        <script type="text/x-kendo-template" id="template">
            <div style="color: salmon; margin-right: 10px'"><h1>#= data #</h1></div>
        </script>

JavaScript

var viewModel = kendo.observable({
    items: ["item1", "item2", "item3"],
    newItem: null,
    add: function(e) {
        if (this.get("newItem")) {
            this.get("items").push(this.get("newItem"));
        }
    }
});

kendo.bind(document.body, viewModel);