Template Binding Test

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.silver.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="container">
    <ul data-role='listview' data-bind='source:ds' data-template='itemTemplate'></ul>
    
        <div data-role='grid' data-bind='source:ds' data-columns='[{field:"ID"},{field:"ID",template:"<span data-bind=\"text:Name,click:clickContact,invisible:showRevenge\"></span><span data-bind=\"click:clickRevenge,visible:showRevenge\">Revenge</span><span data-bind=\"click:clickSuperRevenge,visible:showRevenge\">Super Revenge</span>"}]' ></div>    
</div>
<script type="text/x-kendo-tmpl" id='itemTemplate'>    
    <li><span data-bind='text:test'></span><span data-bind='text:Name,click:clickContact,invisible:showRevenge'></span>
    <span data-bind='click:clickRevenge,visible:showRevenge'>Revenge</span>
        <span data-bind='click:clickSuperRevenge,visible:showRevenge'>Super Revenge</span>
    </li>
</script>

JavaScript

var vm = new kendo.observable({
    test:function(){
            console.warn(arguments);
        return "";
    },
    ds: new kendo.data.DataSource({
        transport: {
            read: function (options) {
                options.success([{ID:1,Name:"JohnnyBallz"},{ID:2,Name:"jeffBonez"},{ID:3,Name:"TedCruz"},{ID:4,Name:"FranktSnitch"}]);
            }
        }
    }),
    clickContact:function(e){
          var data = e.data;
          var $target = $(e.target);
        data.set('showRevenge',true);
    },
    clickRevenge:function(e){
          var data = e.data;
          var $target = $(e.target);
        data.set('showRevenge',false);
    },
    clickSuperRevenge:function(e){
          var data = e.data;
          var $target = $(e.target);
        data.set('showRevenge',false);
    }
});


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

console.wa