循环播放带有胡子的对象数组

Question

编辑：更新此主题以澄清我的问题。

我做一个AJAX调用JSON中返回一个数据集，看起来像这样：已经采取了通过DB意见的护理

一切（包括正确的列名），所以我想编写一个脚本它只是抓取一个数据集并将其吐出一个格式良好的html表格。这样，数据库的表\视图可以被更改（列添加和删除），代码将不必更新。我一直试图让这个与胡子一起工作，但似乎没有一个简单的方法来做到这一点。在examples中，我发现使用带有一系列对象的胡子的人们都明确引用了模板中的对象属性。我不知道对象属性的数量或名称（数据集的列）将成为时间的头，因此我无法在模板中静态地输入它们。

现在，我用两个模板，一个标题和一个只为表行：

<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('');