Question

编辑：更新了这个帖子以澄清我的问题。

我做了一个ajax调用，返回json中的数据集，如下所示： enter image description here

所有内容（包括正确的列名）都已经通过数据库视图处理了，因此我想编写一个脚本，它只是抓取一个数据集并将其吐出一个格式很好的html表。这样可以更改DB的table \ view（添加和删除列），并且不必更新代码。我一直试图让这个用胡子工作，但似乎没有一个简单的方法。在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”]，[“and，依此类推”，“等等”，“等等”]等等

但是如果你知道总会有三列返回，你可以这样做：

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

用胡子循环一堆对象

1 个答案: