[英]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.