JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<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.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="foo" data-role="view" data-model="viewModel" data-init="onInit">
    <p data-bind="text: foo"></p>
    <ul id="listview" data-role="listview" data-style="inset" data-template="template" data-bind="source: ds"></ul>
</div>
<script type="text/x-kendo-template" id="template">
    <span>#= id # : #= name #</span>
</script>

JavaScript

var app = new kendo.mobile.Application(document.body);

var viewModel = kendo.observable({
    ds: new kendo.data.DataSource({ //dataSource
        data: [
            {id: 1, name: "Item1"},
            {id: 2, name: "Item2"},
            {id: 3, name: "Item3"}
        ],
        schema: {
            model: {
                id: "id", 
                fields: {
                    id: {type: "number"},
                    name: {type: "string"}
                }                    
            }
        }            
    }),
    foo: "foo" //viewModel field
});