The handlebars can be looped automatically with each, and the following describes each loop inside the loop.
HTML code
1 ! DOCTYPE html>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>Handlebars circulating sleeve cycle</title>6 <styleMedia= "Screen">7 *{8 margin:0;9 padding:0;Ten List-style:None; One } A . Time{ - float: Left; - width:100px; the } - . Content{ - float: Left; - Border-left:1px solid Black; + width:100px; - Padding-left:20px; + Padding-bottom:10px; A } at #dataList Li{ - Clear:both; - } - </style> - </Head> - in <Body> - <Div> to <ulID= "DataList"> + - </ul> the </Div> * <!--introduction of jquery, handlebars js file - $ <Scripttype= "Text/javascript"src=".. /js/jquery-1.8.3.min.js "></Script>Panax Notoginseng <Scripttype= "Text/javascript"src=".. /js/handlebars.min.js "></Script> - <!--create a script tag and change the Type property to: Text/x-handlebars-template - the <ScriptID= "Table-template"type= "Text/x-handlebars-template"> + <!--The data is recycled. - A {{#each data}} the <Li> + <Div class=" Time"> - <P>{{name}}</p> $ </div> $ <Div class="content"> - <!--To recycle the data inside the Data:info. - - {{#each info}} the <!--info, so you can print multiple this directly - - <P>{{ This}}</p>Wuyi {{/Each }} the </div> - </li> Wu {{/Each }} - </Script> About $ <Scripttype= "Text/javascript"src= "./index.js"></Script> - - </Body> - </HTML>
Index.js Code:
1 //JSON data2 var data = [3 {4 "name": "Zhang San",5 "Info": [6 "Eyes",7 "Ear",8 "Nose"9 ]Ten },{ One "name": "John Doe", A "Info": [ - "Eyes", - "Ear", the "Nose" - ] - }]; - + //Encapsulate a function, pass in three values (the contents of the script tag (ID), (the ID that needs to fill the location), (data)) - var filltemplate = function (templateobj,contentobj,filldata) { + var templatehtml = templateobj.html (); A var template = Handlebars.compile (templatehtml); at contentobj.html (Template (Filldata)); - }; - -Filltemplate ($ ("#table-template"), $ ("#dataList"), {data:data});
Handlebars,each loop inside Each loop