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

Question

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

下面是我在 Handlebars 中的示例数据和代码，我想根据 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>

来源

Answer 1

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

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

通常，您通过 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>

如果由于某种原因无法更改服务器端，请编写一个小函数，将传入的数据更改为在将其传递到 Handlebars 之前显示的布局，而不是尝试将 Handlebars 弯曲到其设计上。五行循环就可以做到这一点。