[英]Using handlebars to iterate over a complex object
我有一個特殊的數組,該如何重復呢?
看起來像:
{
"0.1.0": {
"pictures": {
"list": ""
},
"show": true,
"implemented ": false,
"percentageDoneVersion": 100,
"description": "Programmierung ...",
"tasks": {
"1":{
"percentageDone":10,
"description":"Text1..."
},
"2":{
"percentageDone":70,
"description":"Text2..."
},
"3":{
"percentageDone":10,
"description":"Text3..."
}
}
}
}
我嘗試了不同的方法,但沒有成功...
謝謝。
我對要求不是很清楚,但是根據提供的信息,您似乎正在從以下鏈接中查找內容:
<script id="template" type="text/x-template">
<div class="row" style="">
<hr>
<div class="col-xs-12 col-lg-12">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#versionHeading{{@index}}" href="#versionHeading{{@index}}">{{{body.project.versionHeading}}}</a></h4>
</div>
<div id="versionHeading{{@index}}" class="panel-collapse collapse in">
<div class="panel-body">
<p>{{{body.project.versionIntro}}}:</p>
{{#each body.project.versionContent}}
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#mainVersion{{@index}}" href="#mainVersion{{@index}}">Version {{@key}}</a></h4>
</div>
<div id="mainVersion{{@index}}" class="panel-collapse collapse in">
<div class="panel-body">
<p>{{{this.description}}}</p>
<ul>
{{#each this.tasks}}
<li>{{@key}}.) {{{this.description}}} (progress ({{this.percentageDone}}% done)</li>
{{/each}}
</ul>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</script>
假設您提供的json數據包裝在主體和項目結構中,即
{
"body": {
"project": {
"versionContent": {
....
}
}
}
}
這是您的數據和html起作用的jsFiddle 。 您可以根據需要對此進行改進。 版本和任務都可以動態增長。 我建議您閱讀此簡單的“把手”教程。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.