JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="itemsView"
data-role="view"
data-model="vm">
<ul data-role="listview" data-bind="source: items, click: clickHandler" data-template="itemsTemplate" >
</ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<a data-bind="style: {backgroundColor: getItemBackgroundColor}">#=Name#</a>
</script>
</div>
JavaScript
var vm = kendo.observable({
items: [{
Selected: false,
Name: "Item1"},
{
Selected: true,
Name: "Item2"},
{
Selected: false,
Name: "Item2"}],
clickHandler: function(e) {
debugger;
e.dataItem.Selected = !e.dataItem.Selected;
},
getItemBackgroundColor: function(item) {
if (item.Selected) {
return 'green';
} else {
return '';
}
}
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"
});