循環播放帶有鬍子的對象數組

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