Example of Kendo MVVM and Templates
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="page-container">
<div data-template="test-template" data-bind="source: this">
<script id="consensi-template" type="text/x-kendo-template">
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" data-bind="value: linkToAdd" placeholder="Link here...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-bind="click: addLink">Add</button > < /span>
<div>
</div>
</script>
</div>
</div> <!-- class="page-container" -->
JavaScript
jQuery(function($) {
var viewModel = kendo.observable({
linkToAdd: "",
addLink: function(){
alert("Link writed was:" + viewModel.linkToAdd);
}
});
kendo.bind($(".page-container"), viewModel);
});