使用把手循环播放JSON对象数组

本文介绍了使用把手循环播放JSON对象数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ {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： $（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.htmlUpdate: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对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！