javascript - 使用 Handlebars 遍历复杂对象

Question

我有一个特殊的数组，如何遍历它？它看起来像:

{
                "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..."
                            }
                    }
                }

我尝试了不同的方法，但没有成功...

谢谢。

Answer 1

我对要求并不完全清楚，但根据提供的信息，看起来您正在寻找链接:

<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": {
                  ....
            }
        }
    }
}

这是一个有效的 jsFiddle从你的数据和 html。您可以根据需要对此进行改进。版本和任务都可以动态增长。我建议你通过this简单的 Handlebars 教程。