用把手搭建动态桌子 [英] Building dynamic table with handlebars

问题描述

我正在尝试使用 handlebars.js 创建一个动态表.我想放在表格中的一个对象的例子是:

I am trying to create a dynamic table with handlebars.js. An example of an object I want to put in the table is:

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>

我的问题是用户也可以添加他们自己的表头，所以我不能只做:

My problem is that the user can also add their own table headers, so i can't for example just do:

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

它必须动态完成.我已经看过了:{{#each}}，但似乎无法围绕它.另外，如何打印属性名称而不仅仅是对象中的值(就像我想要在表标题中一样).

It has to be done dynamically. I have looked at: {{#each}}, but just can't seem to wrap my head around around it. Also, how can I print the property name instead of just the value in an object (like I want in the table headers).

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

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

This is my template. I feel like I am closing in on the right solution, but I am not sure where I am doing something wrong.

$.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 中处理数据的方式.非常感谢任何帮助！

This is how I handle the data in my JS. Any help is greatly appreciated!

推荐答案

根据您的描述，我认为您别无选择，只能通过遍历 来构建表头(对象键)数组数组中的每个 对象并过滤掉所有重复项.换句话说，您必须从所有数据对象构建一个包含所有唯一键的数组，这些键将用作表中的列标题.您可以使用现有的库来帮助您完成此操作，例如 Underscore 的 .uniq，但我将提供一个示例实现:

Based on what you are describing, I think you would have no option other than to build an array of table headers (object keys) by iterating over every object in your array and filtering out all of the duplicates. In other words, you must build an array of all of the unique keys from all of your data objects and these will serve as the column headings in your table. You could use an existing library to help yo do this, like Underscore's .uniq, but I will provide an example implementation:

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

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

Next, we must pass our array of unique keys to our template. The unique keys will be used to create the table headings as well as in lookup operations for each object in data.

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

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

Our template must be updated to the following:

<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}} 行的意思是，将 data 中的当前对象的值渲染到属性名为 this输入 uniqueKeys.

Note that the line {{lookup .. this}} is saying, "render the value on the current object in data at the property with the name of this key in uniqueKeys.

另请注意，我在您的 中添加了 标签.根据 MDN，这些是唯一允许的标签一个 .

Also note that I added <tr> tags within your <thead>. According to MDN, these are the only permissible tags within a <thead>.

我创建了一个 fiddle 以供参考.

I have created a fiddle for reference.

这篇关于用把手搭建动态桌子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！