JSFiddle - React, Tailwind, and code Playground

by elgato

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>


<div data-role="view" data-title="Menu" id="scr_menu">
    <a href="#" id="mainlink">View jail cards</a>
</div>

<div data-role="view" data-title="login" id="scr_jailcard_comment" data-model="commentData">
    <header data-role="header">
        <div data-role="navbar" id="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a> 
        </div>
    </header>
    <ul data-role="listview" data-style="inset" data-type="group"> 
        <li>
            <ul data-template="tmpl_jailcard_comments" data-bind="source:jcComments" data-role="listview"> </ul>
        </li>
    </ul>
</div>

<script type="text/x-kendo-template" id="tmpl_jailcard_comments">
    <span class='km-listview-link'">
        <a> #= jcCommentText # </a>
        <p class="item-info"> #= jcCommentDate # </p>
    </span>
</script>

JavaScript

var app = null;
var commentData = {};
var commentCounter = 0;
function tap_ViewJailDoors(e) {
    alert("The first row should read: Comment " + commentCounter);
    var jcComments = [
        {jcCommentText: "Comment " + commentCounter++, jcCommentDate: "January 2013"},
        {jcCommentText: "Comment " + commentCounter++, jcCommentDate: "February 2013"},
        {jcCommentText: "Comment " + commentCounter++, jcCommentDate: "March 2013"}
    ];
    commentData["jcComments"] = jcComments;
    app.navigate("#scr_jailcard_comment");
}
$(document).ready(function(){
    $("#mainlink").click(tap_ViewJailDoors);
});
app  = new kendo.mobile.Application($(document).body, { transition: "slide" });