留着胡须循环遍历一系列对象

Question

编辑：更新了此线程以澄清我的问题。

我进行了ajax调用，返回的json数据集如下所示：

一切（包括正确的列名）都已经通过数据库视图进行了处理，因此我想编写一个脚本，该脚本只获取数据集并将其以格式正确的html表吐出。 这样，可以更改数据库的表\\视图（添加和删除列），并且不必更新代码。 我一直在尝试使它与胡须配合使用，但是似乎没有一种简单的方法。 在示例中，我发现人们在将胡须与一系列对象配合使用时，他们都明确引用了模板中的对象属性。 我不知道对象属性的数目或名称（数据集的列）是否会花时间，所以我无法在模板中静态输入它们。

现在，我正在使用两个模板，一个用于标题，一个仅用于表行：

<script id="datasetTable" type="text/template">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    {{#headers}}
                    <th>{{.}}</th>
                    {{/headers}}
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table></script>

<script id="datasetTableRows" type="text/template">
                <tr>
                {{#rows}}
                    <td>{{.}}</td>
                {{/rows}}
                </tr>
</script>

这是我的使用方式：

//Build table headers from dataset's columns
datasetCols = [];
for (var keyName in dataset[0]){
    datasetCols.push(keyName);
};

//Build table rows from dataset rows
var renderedTableRows = ''; 
var tplRows = document.getElementById('datasetTableRows').innerHTML;
datasetLength = dataset.length;
for (var i=0; i<datasetLength; i++) {
    var currentRow = dataset[i];
    var rowValues = [];
    for (var prop in currentRow){
        rowValues.push(currentRow[prop]);
    }
var renderedHtml = Mustache.render(tplRows, {rows: rowValues});
renderedTableRows += renderedHtml;
}

//render table with headers
var $renderedTable = $(Mustache.render('datasetTable', {headers: datasetCols}));
$renderedTable.find('tbody').html(renderedTableRows);

$(htmlContainer).html($renderedTable);

这很好用，但是我真的很想通过仅使用一个模板来进一步简化它。 小胡子能否以一种更有效的方式来处理此过程，而无需我在模板中明确引用对象属性的名称？

我还要补充一点，我已经在其他很多地方使用了小胡子（代码，现在我不希望使用新引擎重写代码），所以如果小胡子不能做，我会坚持暂时是纯js。

Answer 1

我个人没有使用过小胡子，但是它们都很相似。

另外，由于它没有逻辑，所以您真的想返回一种更有用的格式。 即数组数组在这种情况下会更好。

[[“” 234“，” ddg“，” aa“]，[”等等，等等“，”等等“]]

但是，如果您知道总是返回三列，则可以执行以下操作：

<table class="table table-hover table-bordered">
<thead>
   <th> Whatever your headers are </th>
</thead>
   <tbody>
     {{#.}}
      <tr>
         <td>{{col1}}</td>
         <td>{{col2}}</td>
         <td>{{col3}}</td>
      </tr>
     {{/.}}
 <tbody>
</table>

或枚举对象：

<table class="table table-hover table-bordered">
<thead>
   <th> Whatever your headers are </th>
</thead>
   <tbody>
     {{#.}}
          <tr>
         {{#each dataSet}}
            <td>{{this}}</td>
         {{/each}}
          </tr>
     {{/.}}
 <tbody>
</table>

另外，在javascript中创建HTML时，使用数组可以更快。

 var somehtml = [];
 somehtml.push('something');
 somehtml.push('something else');
 somehtml = somehtml.join('');