Handlebars 模板：将多个数组中的值打印到 table

Question

我正在尝试将多个数组打印到一个 table 中。数据包含在两个数组中，就像一个名称值对。我不确定 handlebar 语法，所以感谢任何帮助

来自Javascript的数组如下：键 = {"name", "age", "address"}; 值 = {"AD", "2", "123st"};

handlebars（版本 1.0 rc2）模板如下所示，但似乎没有打印任何内容。有什么提示吗？

<table>
    {{#each keys}}
        <tr>
            <td> {{keys.@index}}</td>
            <td> {{values.@index}} </td>
        </tr>
    {{/each}}
</table>

Answer 1

请注意，您问题中的数组是无效的 JavaScript 语法，应该用 square-brackets 代替大括号（例如 ["name", "age", "address"]）。

我认为您的数据结构可以改进，我建议将这两个字符串数组合并为一个对象：

{
    name: 'AD',
    age: '2',
    address: '123st'
}

我们可以创建一个新模板来迭代对象中的每个属性，我们可以使用 Handlbars' built-in {{@key}}:

访问密钥

<script id="Template1" type="text/x-handlebars-template">
    <table>
        {{#each this}}
            <tr>
                <td>{{@key}}</td>
                <td>{{this}}</td>
            </tr>
        {{/each}}
    </table>
</script>

如果出于某种原因，您必须坚持使用这两个数组，我们可以使用 Handlebars' lookup helper 来访问 values 数组上的要求属性：

<script id="Template2" type="text/x-handlebars-template">
    <table>
        {{#each keys}}
            <tr>
                <td>{{this}}</td>
                <td>{{lookup ../values @index}}</td>
            </tr>
        {{/each}}
    </table>
</script>

Handlebars 模板：将多个数组中的值打印到 table

Handlebars Template: Print values from multiple arrays into a table

javascript

handlebars.js