簡體   English   中英

使用把手遍歷復雜對象

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

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM