我有这种格式的JSON数据
{
"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"
}
]
}
}
＆＃34; items＆＃34;部分是一个数组。如何在Handlebars中构建模板以在jQM列表视图中为我提供html结果。这是我目前拥有的完整HTML源代码，包括JavaScript
<script src="libs/jquery-2.0.3.min.js"></script>
<script src="libs/jquery.mobile-1.4.0.min.js"></script>
<script src="libs/handlebars-v1.3.0.js"></script>
<link rel="stylesheet" href="../styles.css">
<script type="text/javascript">
$("document").ready(function() {
var template = $("#itemTemplate").html();
var renderer = Handlebars.compile(template);
var result = renderer({
"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"
}]
}
});
$("#container").html(result);
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h3>Header<h3>
</div>
<div data-role="content">
<script type="text/x-handlebars-template" id="itemTemplate">
<ul data-role="listview" id="posts">
{{#each items}}
<li>
<a data-transition="" href="{{{link}}}">
<p>{{{title}}}</p>
<small>{{{description}}}</small>
</a>
</li>
{{/each}}
</ul>
</script>
<h1>This is my header one</h1>
<h3>This is my header three</h3>
<!-- This is the container where the templates will be instantiated -->
<div id="container"></div>
</div>
</div><!-- page -->
</body>
答案 0 :(得分：3)
工作示例：https://github.com/theAcadian/phonegap-workshop-jqm/blob/master/index.html
工作jsFiddle：http://jsfiddle.net/Gajotres/vds2U/43/
<!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>
$(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');
});