0

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

我有一个名为 columns 的变量，它保存用户选择的列，我们假设它看起来像

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>

谢谢！

4

2 回答 2

2

立即想到两种可能性：

  1. 使用自定义助手修改 Handlebars。
  2. 修改您的数据以更好地符合 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 可以使用它最喜欢的东西（数组）。毕竟，Handlebars 更喜欢您的大部分逻辑都在模板之外完成。演示：http: //jsfiddle.net/ambiguous/vsBFS/

于 2013-10-10T01:14:29.100 回答
0

好的，我想我现在明白了。我会制作两个单独的模板对象——整个表格和一个“行”模板。然后，您将不得不做一些 javascript 逻辑渲染每个将每个行模板传递给适当的模型。

于 2013-10-09T23:58:46.370 回答