Skip to content

Instantly share code, notes, and snippets.

@joystick
Created October 18, 2013 06:52
Show Gist options
  • Select an option

  • Save joystick/7037471 to your computer and use it in GitHub Desktop.

Select an option

Save joystick/7037471 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script id="articles-template" type="text/x-handlebars-template">
<ul id="listv" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
{{#entries}}
<li><a href="#" onClick="alert('{{title}}')">{{title}}</a></li>
{{/entries}}
</ul>
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div data-role="page" data-theme="b" id="listview-page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" id="listview-content">
<p>
<div id="articleHandlebars" data-demo-html="true"></div>
</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
$(document).on('pagebeforeshow', '#listview-page', function(){
parseRSS();
});
function parseRSS() {
var articles = { entries: []};
for (var i = 0; i <=4; i++)
{
var obj = {
title: "test" + i
};
articles.entries.push(obj);
}
showData(articles);
}
function showData(data)
{
var source = $("#articles-template").html();
var template = Handlebars.compile(source);
var html = template(data);
$("#articleHandlebars").html(html);
$("#listview-content").trigger('create');
$("#listview-page").trigger('pagecreate');
$("#articleHandlebars ul").listview('refresh');
$("#articleHandlebars ul").listview().listview('refresh');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment