JSFiddle - React, Tailwind, and code Playground

by underlog

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="https://getfirebug.com/firebug-lite.js"></script>
<script id="template" type="text/x-kendo-template">
    # for (var i = 0; i < data.length; i ++) { #
    # var categoryName = data[i].categoryName; #
<div class="categoryBox">
    <div>
        <strong>
            #= categoryName #
        </strong>                    
        <a class="box-link" href="http://www.google.co.in">
            Read More
        </a>
    </div>
</div>
    # } #
</script>

<div id="foo">
</div>

JavaScript

var template = kendo.template($("#template").html());

var category = [
    { "categoryName": "Category1" },
    { "categoryName": "Category2" },
    { "categoryName": "Category3" },
    { "categoryName": "Category4" },
    { "categoryName": "Category5" },
    { "categoryName": "Category6" }
];

var dataSource = new kendo.data.DataSource({data: category});

dataSource.bind("change", function() {
    console.log(dataSource.view());
    $("#foo").html(template(dataSource.view()));
});
// read data from the remote service
dataSource.read();
console.log(dataSource.view());