使用把手循环播放JSON对象数组 [英] Loop through an Array of JSON objects Using Handlebars
本文介绍了使用把手循环播放JSON对象数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
{
count：3，
价值：{
标题：每日Feeds混搭，
description：Feeds Description，
items：[
{
title：Title One，
link：http://linkone.com，
description：标题一描述
}，
{
title：Title Two，
link：http://titletwo.com，
description：Title two description
}，
{
title：Title Three，
link：http://linkone.com，
description：标题三说明
$ b $ / code> 项目部分是一个数组。我如何在Handlebars中构造一个模板，以在jQM listview中给我一个html结果。以下是我目前拥有的完整HTML源代码，包括JavaScript
< script src =libs / jquery-2.0。 3.min.js>< /脚本>
< script src =libs / jquery.mobile-1.4.0.min.js>< / script>
< script src =libs / handlebars-v1.3.0.js>< / script>
< link rel =stylesheethref =../ styles.css>
< script type =text / javascript>
$（document）。ready（function（）{
var template = $（＃itemTemplate）。html（）;
var renderer = Handlebars.compile （模板）;
var result = renderer（{$ b $count：3，
value：{
title：Daily Feeds Mashup，
description：Feeds Description，
items：[{
title：Title One，
link：http://linkone.com ，
description：标题一描述
}，{
title：标题二，
link：http://titletwo.com ，
description：Title two description
}，{
title：Title Three，
link：http：// linkone。 com，
description：Title 3 description
}]
}
}）;
$（＃container）。html（result）;
}）;
< / script>
< / head>
< body>
< div data-role =pageid =home>
< div data-role =header>
< h3>标头< h3>
< / div>
< div data-role =content>
< script type =text / x-handlebars-templateid =itemTemplate>
< ul data-role =listviewid =posts>
{{#each items}}
< li>
< a data-transition =href ={{link}}}>
< p> {{{title}}}< / p>
< small> {{{description}}}< / small>
< / a>
< / li>
{{/ each}}
< / ul>
< / script>
< h1>这是我的标题one< / h1>
< h3>这是我的标题三< / h3>
<！ - 这是模板将被实例化的容器 - >
< div id =container>< / div>
< / div>
< / div><！ - page - >
< / body>
解决方案
工作示例： https://github.com/ theaadian / phonegap-workshop-jqm / blob / master / index.html
更新：
工作jsFiddle： http://jsfiddle.net/Gajotres/vds2U/43/
HTML：
<！DOCTYPE html>
< html>
< head>
< title> jQM Complex Demo< / title>
< meta http-equiv ='Content-Type'content ='text / html;字符集= UTF-8’ />
< link rel =stylesheethref =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 =pageid =indexdata-theme =a>
< div data-role =header>
< h3>
第一页
< / h3>
< / div>
< div data-role =content>
< script id =items-templatetype =text / x-handlebars-template>
{{＃。}}
< li>< a href ={{this.link}}>< h3> {{this.title}}< / h3> < p为H. {{this.description}}< / p>< / A>< /锂>
{{/。}}
< / script>
< ul id =items_listdata-role =listviewdata-filter =true>
< / ul>
< / div>
< div data-role =footerdata-position =fixed>
< / div>
< / div>
< / body>
< / html>
JavaScript：
< $ c $> $（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：Title Two，
link：http://titletwo.com，
description：Title two description
}，
{
title：Title Three，
link：http://linkone.com，
description：标题三说明
}
]
}
};
var itemsHandler = Handlebars.compile（$（＃items-template）。html（））;
$（'＃items_list'）。html（itemsHandler（items.value.items））;
$（'＃items_list'）。listview（）。listview（'refresh'）;
}）;
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>
解决方案
Working example: https://github.com/theAcadian/phonegap-workshop-jqm/blob/master/index.html
Update:
Working jsFiddle: http://jsfiddle.net/Gajotres/vds2U/43/
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');
});
这篇关于使用把手循环播放JSON对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
