JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<div id="currentLicensing">
    <u>Template using template syntax</u>
    <div data-template="currentLicenseTemplate" 
         data-bind="source: currentLicenseInformation" ></div>
    <br/>
    
    <u>Template using data-bind</u>
    <div data-template="currentLicenseTemplate1" 
         data-bind="source: currentLicenseInformation" ></div>
</div>


<script id="currentLicenseTemplate" type="text/x-kendo-template">
	<span>#: LicenseName #</span>(<span >#: LicenseCode #</span>)
	<span>#: QuantityUsed #</span> / <span>#: QuantityAllowed #</span>
	<br>
</script>

<script id="currentLicenseTemplate1" type="text/x-kendo-template">
 <div>
	<span data-bind="text: LicenseName" ></span>(<span data-bind="text: LicenseCode" ></span>)
	<span data-bind="text: QuantityUsed" ></span> / <span data-bind="text: QuantityAllowed"></span>
 </div>        
</script>

JavaScript

var model ={
    currentLicenseInformation:     [
        {"LicenseCode":"WEB","LicenseName":"Web","QuantityAllowed":10,"QuantityUsed":0},
        {"LicenseCode":"CLIENT","LicenseName":"Client","QuantityAllowed":2,"QuantityUsed":0}
    ]};

var viewModel = new kendo.observable(model);

kendo.bind($("#currentLicensing"), viewModel)