JSFiddle - React, Tailwind, and code Playground

by vinodlouis

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css">
<script src="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>
<div data-role="page" data-theme="b">
    <div data-role="header" data-position="fixed">
        <h3>header</h3>
    </div>
    <div data-role="content" id="div1"></div>
</div>

JavaScript

function parseData() {

    var data = {
        0: {
            "title": "Sample Konfabulator Widget 1",
        },
        1: {
            "title": "Sample Konfabulator Widget 2",
        },
        2: {
            "title": "Sample Konfabulator Widget 3",
        }
    };

    var html = '<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">';
    $.each(data, function (index, value) {
        console.log(value.title);
        html += '<li>' +
            '<div data-role="collapsible">' +
            '<p>' + value.title + '</p>' +
            '<a href="#" class="ui-btn ui-btn-inline">button</a>' +
            '</div>' +
            '</li>';
    });
    html += '</ul>';
    return html;
}


var div = $('#div1');
div.html(parseData());
div.find('ul').listview('refresh', true);