javascript - 在 Handlebars 中循环固定次数的数据

我想通过车把以x行/ x列的方式显示数据。

以下是我的示例数据和把手中的代码，我想根据section1中的行和列数来遍历项目。

{{each}}并不是最好的选择，因为我无法退出循环。因此，我想在列结束时结束列循环，它应该再次开始读取行。

下面的代码段当然不起作用。

var data = {
  "section1" : {
        "columns" : "2",
        "comment" : "This is a comment for the section",
        "items" : {
            "1" : {
                "column" : "1",
                "row" : "1",
                "title" : "API Username",
                "value" : "xyz"
            },
            "2" : {
                "column" : "2",
                "row" : "1",
                "title" : "API Password",
                "value" : "246006"
            }
        },
        "rows" : "1"
    }
};

var source = document.getElementById("section1").innerHTML;
var template = Handlebars.compile(source);
var target = document.getElementById("target");

try {
  target.innerHTML = template(data.section1);
} catch (ex) {
  console.log(ex.message);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>

<script id="section1" type="text/x-handlebars-template">
    {{#times rows}}
        <div class="row dialog__right-row-corrector">
        {{#times columns}}
            <div class="col-xs-12">
                <div class="form-group">
                    <label>API Username</label>
                    <div id="username" class="form-control form-control--transparent"></div>
                </div>
            </div>
         {{/times}}
         </div>
    {{/times}}
</script>

<div class="target"></div>

资源

最佳答案

数据的结构方式毫无用处。不要滥用列表对象。您有一个部分列表，一个行列表，一个列列表。

对于事物列表，请始终使用数组，而不要使用对象。如果存在包含事物列表的事物列表，则创建对象的嵌套数组。

通常，您通过JSON发送给客户端的数据应该是客户端应该显示的模型，而不是服务器数据库的模型。

更改服务器端代码，使其以以下格式发送数据。

var data = {
    "sections": [
        {
            "id": "section1",
            "comment": "This is a comment for the section",
            "rows": [
                {
                    "columns": [
                        {
                            "title": "API Username",
                            "value": "xyz"
                        },
                        {
                            "title": "API Password",
                            "value": "246006"
                        }
                    ]
                }
            ]
        }
    ]
};

var source = document.getElementById("section").innerHTML;
var template = Handlebars.compile(source);
var target = document.getElementById("target");

target.innerHTML = template(data.sections[0]);

#target {
  border: 1px solid red;
  padding: 1px;
}
.form-group {
  border: 1px solid blue;
  padding: 1px;
  margin: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>

<script id="section" type="text/x-handlebars-template">
    <div>{{comment}}</div>
    {{#each rows}}
        <div class="row dialog__right-row-corrector">
        {{#each columns}}
            <div class="col-xs-12">
                <div class="form-group">
                    <label>{{title}}</label>
                    <div>{{value}}</div>
                </div>
            </div>
         {{/each}}
         </div>
    {{/each}}
</script>

<div id="target"></div>

如果由于某种原因无法更改服务器端，则可以编写一个小的函数，将传入的数据更改为所示的布局，然后再将其传递到手把，而不是尝试将手把弯曲到其设计之外。五行循环可以做到这一点。