JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css">
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h2>Page 1</h2>
</div>
<div data-role="content">
<div id="container1">
<ul data-role="listview" data-inset="true">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<script id="template1" type="text/x-jquery-tmpl">
<ul data-role="listview" data-inset="true">
{{each(i, item) items}}
<li>${item}</li>
{{/each}}
</ul>
</script>
<a href="#page2" data-role="button">Go to page 2</a>
</div>
<div id="page2" data-role="page">
<div data-role="header">
<h2>Page 2</h2>
</div>
<div data-role="content">
<a id="back-to-page-1" data-role="button">Go to page 1</a>
</div>
</div>
</body>
</html>
JavaScript
function refreshStyles( $element ) {
$element.wrap( $( '<div id="refresh-styles-wrapper">' ) );
$("#refresh-styles-wrapper").page();
$element.unwrap();
}
function randomString() {
var alphabet = "abcdefghijklmnopqrstuvwxyz",
string = "";
for (var i = 0; i < 10; ++i) {
string += alphabet.charAt( Math.floor( Math.random() * 27 ) );
}
return string;
}
function randomNumber() {
return Math.random();
}
$("#back-to-page-1").click(function() {
var $page1 = $("#page1"),
$container1 = $("#container1"),
$template1 = $("#template1"),
randomObject = {};
randomObject.title = randomString();
randomObject.items = [];
for (var i = 0; i < 5; ++i) {
randomObject.items.push( randomNumber() );
}
$template1.tmpl( randomObject ).appendTo( $container1.empty() );
$.mobile.changePage( $page1 );
refreshStyles( $container1 );
});