Bind Events MVVM ListView

by jwstott

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id='container'>    

    <span data-bind='text:filter'></span>     
    <div id='clinicSearchContainer'>
        Manage Clinics <span class="k-textbox k-space-right">
        <input type="text" data-value-update="keyup" data-bind="value: filter" class="k-textbox" />
        <span class="k-icon k-i-search">&nbsp;</span> </span>
    </div>
    <div data-role='listview' data-template='_template' data-bind='source:ds'/>
</div>
<script id="_template" type="text/x-kendo-template">
    <div>
        <span data-bind='text:ID'/>
        <span data-bind='text:Name'/>
        <button data-bind='click:buttonClicked'>click me</button>            
    </div>
</script>

JavaScript

var serviceData = [{
    ID: 1,
    Name: 'n1'},
{
    ID: 2,
    Name: 'n2'},
{
    ID: 3,
    Name: 'n3'},
{
    ID: 4,
    Name: 'n4'},
{
    ID: 5,
    Name: 'n5'}];

var viewModel = new kendo.observable({
    buttonClicked: function(e) {
        alert('clicked');
    },
    filter: null,
    ds: function() {
        var params = this.get('filter');
        var tmpData = $.grep(serviceData,function(element){return element.Name.indexOf(params)!==-1; });
        
        return new kendo.data.DataSource({
            data: tmpData
        });
    }
});

kendo.bind($('#container'), viewModel);