I have JSON data with this format
{
"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"
}
]
}
}
The "items" part is an array. How can I construct a template in Handlebars to give me a an html result in a jQM listview. Here's the full html source of what I currently have, including the 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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
