JSFiddle - React, Tailwind, and code Playground

by Dragan Gaić

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
            </div>
            
            <div data-role="content">
                <script id="items-template" type="text/x-handlebars-template">
                    {{#.}}
                    <li><a href="{{this.link}}"><h3>{{this.title}}</h3><p>{{this.description}}</p></a></li>
                    {{/.}}
                </script>                
                <ul id ="items_list" data-role="listview" data-filter="true">
                </ul>           
            </div>
            
            <div data-role="footer" data-position="fixed">
                
            </div>
        </div> 
    </body>
</html>

JavaScript

$(document).on('pagebeforeshow', '#index', function(){ 
    var items = {
        "count": 3,
        "value": {
            "title": "Daily Feeds Mashup",
            "description": "Feeds Description",
            "items": [
                {
                    "title": "Title One",
                    "link": "http://linkone.com",
                    "description": "Title one description"
                },
                {
                    "title": "Title Two",
                    "link": "http://titletwo.com",
                    "description": "Title two description"
                },
                {
                    "title": "Title Three",
                    "link": "http://linkone.com",
                    "description": "Title three description"
                }
            ]
        }
    };
    
    var itemsHandler = Handlebars.compile($("#items-template").html());
    $('#items_list').html(itemsHandler(items.value.items)); 
    $('#items_list').listview().listview('refresh');
});