JSFiddle - React, Tailwind, and code Playground

by bsatrom

HTML

<script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>

<section id="sessions">
  
    <script id="tpl" type="text/x-kendo-template">

      # for (var i = 0; i < data.length; i++) { #

            <div class="session #=data[i].Category.toLowerCase()#">

                    <h1 class="sessionTitle">#= data[i].Title #</h1>
                    <h1 class="sessionSpeaker">#= data[i].Persons #</h1>
                    <p>#= data[i].Description #</p>
                    <h3>Level: #= data[i].Level# || #= data[i].Category #</h3>         
                    <h3>Tags: #= data[i].Tag #</h3>
     
                    <hr />
            </div>
        
       # } #
    </script>

    <div id="sessionList"></div>

</section>

JavaScript

$("#sessionList").kendoListView({
  template: kendo.template($("tmpl").text()),
  dataSource: kendo.data.DataSource({
    transport: {
        read: {
            url: "http://thatConference.com/api/session",
            dataType: "json"
        }
    },
      error: function() {
              alert('you suck');
      }
  })
});