Question

我正在开发一个带有把手诱惑引擎的节点项目。我有一个非常大的对象，我需要在表中表示。用户可以选择他们想要查看的列。

我有一个名为列的可变量，用于保存用户选中的列，我们假装它看起来像

columns = ['name','email']

我有一个大对象数组

items = [{
    name:'foo',
    email:'foo@foo.com',
    otherPropN:'other...'
}, ...]

这是我第一次尝试渲染只包含列名和电子邮件的表。

      <table class="table">
                <thead>
                    {{#each columns}}
                        <th>{{this}}</th>
                    {{/each}}
                </thead>
                <tbody>
                    {{#each items}}
                        {{#each ../columns}}
                            <td>{{*WHAT TO PUT HERE!*}}</td>
                        {{/each}}
                    {{/each}}
                </tbody>

            </table>

我需要回到项目的范围，所以我可以说item[column]但是，我不知道该怎么做。

在EJS中，我会这样做。

<table class="table">
                <thead>
                    <% columns.forEach(function(column){ %>
                        <th><%=column%></th>
                    <% }); %>
                </thead>
                <tbody>
                                  <% item.forEach(function(item){ 
                         columns.forEach(function(column){ %>
                        <td><%=item[column]%></td>

                        <% });
                                   }); %>
                </tbody>

            </table>

谢谢！

Answer 1

立刻想到两种可能性：

使用自定义帮助程序修改句柄。
修改您的数据以更好地了解Handlebars的想法。

第一个选项是这样一个简单的帮助：

Handlebars.registerHelper('property', function(o, k) {
    return o[k];
});

然后你可以说：

<td>{{property ../this this}}</td>

在模板中。演示：http://jsfiddle.net/ambiguous/Dedt6/

第二个选项是在模板看到任何内容之前在JavaScript中进行数据争论：

// Or the nested for-loop equivalent
var items_mangled = items.map(function(item) {
    return columns.map(function(column) {
        return item[column];
    });
});

然后将items_mangled作为items: items_mangled处理到模板函数，您的模板将具有：

{{#each items}}
    <tr>
        {{#each this}}
            <td>{{this}}</td>
        {{/each}}
    </tr>
{{/each}}

基本上，将您的数组和对象数组转换为JavaScript中的单个数组数组，以便Handlebars可以处理它最喜欢的事物（数组）。把手更喜欢你的大多数逻辑毕竟是在模板之外完成的。演示：http://jsfiddle.net/ambiguous/vsBFS/

Answer 2

好吧，我想我现在就明白了。我会制作两个单独的模板对象 - 整体表格和'行'模板。然后你必须做一些javascript逻辑渲染，每个都将每个行模板传递给适当的模型。

方括号阵列访问和车把模板

2 个答案: