Question

我正在尝试使用handlebars.js创建一个动态表。我想要放在表中的对象示例是：

Object { title: "The Room", director: "Tommy Wiseau", genre: "Drama?", rating: "1"}

我想看的HTML：

    <thead>
    <th>Title</th>
    <th>Director</th>
    <th>Genre</th>
    <th>Rating</th>
    <th>Edited</th>
  </thead>
  <tbody>
    <tr>
      <td>The Room</td>
      <td>Tommy Wiseau</td>
      <td>Drama?</td>
      <td>1</td>
      <td>2017-05-16</td>
    </tr>
  </tbody>

我的问题是用户还可以添加自己的表头，所以我不能这样做：

<td>{{title}}</td>

必须动态完成。我看过：{{#each}}，但似乎无法绕过它。另外，如何打印属性名称而不仅仅是对象中的值（就像我想要的表头中一样）。

  <thead>
    {{#each data}}
    <th>{{@key}}</th><!--property name here-->
    {{/each}}
  </thead>
  <tbody>
    {{#each data}}
    <tr>
      <td>{{this}}</td><!--property value here-->
    </tr>
    {{/each}}
  </tbody>

这是我的模板。我觉得我正在接近正确的解决方案，但我不确定我做错了什么。

$.getJSON("php/loadItems.php?category=" + selected, function(data) {
    let source = $("#itemTemplate").html();
    let template = Handlebars.compile(source);
    delete data[0].id
    $("#tableContainer").append(template(data));
  });

这就是我处理JS中数据的方式。非常感谢任何帮助！

Answer 1

根据您所描述的内容，我认为除了通过迭代数组中的每个对象并过滤掉所有的对象来构建一个表头（对象键）数组之外别无选择。重复。换句话说，您必须从所有数据对象构建一个包含所有唯一键的数组，这些键将用作表中的列标题。您可以使用现有的库来帮助您执行此操作，例如Underscore's .uniq，但我将提供示例实现：

var uniqueKeys = data.reduce(function (acc, obj) {
    return acc.concat(Object.keys(obj).filter(key => acc.indexOf(key) === -1));
}, []);

接下来，我们必须将我们的唯一键数组传递给我们的模板。唯一键将用于创建表格标题以及data中每个对象的lookup操作。

template({
    uniqueKeys: uniqueKeys,
    data: data
});

我们的模板必须更新为以下内容：

<thead>
    <tr>
        {{#each uniqueKeys}}
            <th>{{this}}</th>
        {{/each}}
    </tr>
</thead>
<tbody>
    {{#each data}}
        <tr>
            {{#each ../uniqueKeys}}
                <td>{{lookup .. this}}</td>
            {{/each}}
        </tr>
     {{/each}}
</tbody>

请注意，行{{lookup .. this}}表示，＆＃34;使用data中此键的名称在uniqueKeys的{{1}}呈现当前对象的值。

另请注意，我在<tr>中添加了<thead>个标记。根据{{3}}，这些是<thead>中唯一允许的标记。

我创建了MDN作为参考。

Answer 2

这样的事情会影响你想要完成的事吗？

＆＃13;

{
  "titles": [
    "The Room",
    "Test"
  ],
  "tableObjs": [{
      "director": "Tommy Wiseau",
      "genre": "Drama?",
      "rating": "1"
    },
    {
      "director": "Tommy Wiseau",
      "genre": "Drama?",
      "rating": "1"
    }
  ]
}

＆＃13;

<thead>
  {{#each titles}}
  <th>{{@key}}</th>
  <!--property name here-->
  {{/each}}
</thead>
<tbody>
  {{#each tableObjs}}
  <tr>
    <td>{{this.director}}</td>
    <td>{{this.genre}}</td>
    <td>{{this.rating}}</td>
    <!--property value here-->
  </tr>
  {{/each}}
</tbody>

＆＃13;

用把手建立动态表

2 个答案: