Kendo UI template click bind not working telerik platform

Question

I've been pulling my hair out for a few hours now, maybe someone can help me out, I have already read all the stackoverflow answers but nothing seems to be working.

I stripped down the kendo-template completely to see if it helps, but no dice..

I have now minimized all in jsfiddle code to this: http://jsfiddle.net/Lyzz1t1x

(function () {
var app = kendo.observable({
    onShow: function () {},
    afterShow: function () {}
});

// START_CUSTOM_CODE_home
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes

var test = [{
    "code": "1234",
    "name": "test1"
}, {
    "code": "4525",
    "name": "test535"
}, {
    "code": "6346",
    "name": "dadsd"
}];
app.productlist = {
    data: new kendo.data.DataSource({data:test}), 
  listener: function(e){ console.log('aaaa')}
  };

//If no customerid is set navigate to the settings page
app.listener = function (e) {
    console.log("Event: " + e.type);
};


kendo.bind($('#main'), app);
// END_CUSTOM_CODE_home
})();

That one isn not working

This one is:

http://jsfiddle.net/qd2sr9y6

(function () {

    var viewModel = kendo.observable();
    var test =  [{
            id: 1,
            name: 'Bill',
            tasks: ['Task 1', 'Task 2']
        }, {
            id: 2,
            name: 'John',
            tasks: ['Task 3']
        }, {
            id: 3,
            name: 'Josh',
            tasks: ['Task 4', 'Task 5', 'Task 6']
        }];


    viewModel.demoData = test;
viewModel.listener = function(e){
console.log('aa');
}
    kendo.bind('#container', viewModel);

})();

The only difference, one is using kendo datasource, but I need a kendo datasource to load remote json data, can anyone explain why my click handler stops working with a kendo datasource?

Answer 1

I fixed this issue by putting the observable in var app.home, and the datasource in app.productList

(function () {
var app = {};
app.home = kendo.observable({
    onShow: function () {},
    afterShow: function () {}
});

// START_CUSTOM_CODE_home
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes

var test = [{
    "code": "1234",
    "name": "test1"
}, {
    "code": "4525",
    "name": "test535"
}, {
    "code": "6346",
    "name": "dadsd"
}];
app.productlist = {
    data: new kendo.data.DataSource({data:test}), 
  listener: function(e){ console.log('aaaa')}
  };

//If no customerid is set navigate to the settings page
app.listener = function (e) {
    console.log("Event: " + e.type);
};


kendo.bind($('#main'), app);
// END_CUSTOM_CODE_home
})();

http://jsfiddle.net/L1b6abjy/