Handlebars HBS Express - 如何在不指定属性的情况下迭代对象

Question

我正在尝试使用对象的属性进行迭代以动态打印一个 table 具有一个具有属性的数组和一个具有每个属性.[=12 的值的对象=]

我不知道如何使用车把中的 hbs express 进行 2 次迭代

people: [{
    name: "ken",
    lastname: "grace",
    age: 10
},
{
    name: "ron",
    lastname: "bond",
    age: 20
}];

properties = ["name","lastname", "age"];

HTML 代码：

<table>
                        <thead>
                            <tr>
                                {{#each properties as |property index|}}
                                    <th>
                                        <span>{{property}}</span>
                                    </th>
                                {{/each}}
                            </tr>
                            
                        </thead>
                        <tbody>
                            {{#each people}}
                                <tr>
                                    {{#each properties}}
                                        <th>
                                            {{!-- trying something like: --}}
                                            {{!-- {{people.property}} --}}
                                        </th>
                                    {{/each}}
                                </tr>
                            {{/each}}
                        </tbody>
                    </table>

Answer 1

作为用户@76484 , you want to use the built-in lookup helper:

The lookup helper allows for dynamic parameter resolution using Handlebars variables. It can be used to look up properties of object based on data from the input.

在您的具体示例中，您可能希望将 people 和 properties 迭代存储在 block parameter (e.g., named |person| and |property|), as well as using ../ on your inner loop since the context 中。

例如，将所有这些放在一起，HBS 标记可能如下所示：

<table>
    <thead>
        <tr>
            {{#each properties as |property index|}}
                <th><span>{{property}}</span></th>
            {{/each}}
        </tr>
    </thead>
    <tbody>
        {{#each people as |person|}}
            <tr>
                {{#each ../properties as |property|}}
                    <th>{{lookup person property}}</th>
                {{/each}}
            </tr>
        {{/each}}
    </tbody>
</table>

关于结果 HTML，请参阅 this playground link。

Handlebars HBS Express - 如何在不指定属性的情况下迭代对象

Handlebars HBS Express - How to iterate an object without specify the properties

handlebars.js

each

hbs