javascript - 如何使用 Handlebars 生成网格

Question

我需要使用 Handlebars 生成一个网格（10 行和 10 列）。我创建了这样的模板：

<script id="battlefield-tmpl" type="x-handlebars-template">
    {{#each rows}}
    <div class="battlefield__row">
        {{#each this}}
        <div class="battlefield__cell" data-row="{{this.row}}" data-col="{{this.col}}"></div>
        {{/each}}
    </div>
    {{/each}}
</script>

然后，这是一个脚本部分：

const battleFieldTemplate = getTemplate('battlefield-tmpl');

const temp = battleFieldTemplate({
        rows: [
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        ]
    }
);
document.querySelector('#battlefield').innerHTML += temp;

function getTemplate(templateId) {
    const templateString = document.getElementById(templateId).innerHTML;
    return Handlebars.compile(templateString);

但是现在我需要创建一个模板，其中每个单元格都将包含行和列索引（不是数字 1、2、3 .....10）。它应该是自动生成的。我需要收到这个：

const temp = battleFieldTemplate({
        rows: [
            [{row: 0, col: 0}, {row: 0, col: 1}, {row: 0, col: 2} and so on],

但不是手动编写每个索引。怎么做？

标签： javascriptarrayshandlebars.jsjavascript-objects

Answer 1

首先，渲染您的原始数据。确保您的原始模板有效。

const getTemplate = (sel) => Handlebars.compile(document.querySelector(sel).innerHTML);
const battleFieldTemplate = getTemplate('#battlefield-tmpl');

const temp = battleFieldTemplate({
        rows: [
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        ]
    }
);

document.querySelector('#battlefield').innerHTML = temp;

body {
  padding: 1em;
}

.battlefield__row {
  display: block;
  margin: 0;
  padding: 0;
  margin-bottom: 0.25em;
}

.battlefield__cell {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  line-height: 1.25em;
  border: thin solid grey;
  margin: 0;
  padding: 0;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.3/handlebars.min.js"></script>
<div id="battlefield"></div>
<script id="battlefield-tmpl" type="x-handlebars-template">
    {{#each rows}}
    <div class="battlefield__row">
        {{#each this}}
        <div class="battlefield__cell">{{.}}</div>
        {{/each}}
    </div>
    {{/each}}
</script>

然后，您可以更改您的数据结构并稍微更改模板......您需要在{{row}}没有该this.部分的情况下访问。

const getTemplate = (sel) => Handlebars.compile(document.querySelector(sel).innerHTML);
const battleFieldTemplate = getTemplate('#battlefield-tmpl');

const temp = battleFieldTemplate({
        rows: [
            [ {row: 0, col: 0}, {row: 0, col: 1}, {row: 0, col: 2} ],
            [ {row: 1, col: 0}, {row: 1, col: 1}, {row: 1, col: 2} ],
            [ {row: 2, col: 0}, {row: 2, col: 1}, {row: 2, col: 2} ]
        ]
    }
);

document.querySelector('#battlefield').innerHTML = temp;

body {
  padding: 1em;
}

.battlefield__row {
  display: block;
  margin: 0;
  padding: 0;
  margin-bottom: 0.25em;
}

.battlefield__cell {
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  border: thin solid grey;
  margin: 0;
  padding: 0;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.3/handlebars.min.js"></script>
<div id="battlefield"></div>
<script id="battlefield-tmpl" type="x-handlebars-template">
    {{#each rows}}
    <div class="battlefield__row">
        {{#each this}}
        <div class="battlefield__cell" data-row="{{row}}" data-col="{{col}}">{{row}}×{{col}}</div>
        {{/each}}
    </div>
    {{/each}}
</script>