Question

我希望以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>

源

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>

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

在把手中循环数据固定次数

1 个答案: