mustache - 使用动态数组的 Mustache 动态表

Question

我想知道是否有比我当前解决以下问题更优雅的解决方案

问题:在以下情况下，使用 Mustache 从动态数组生成动态表:

1. 总列数未知
2. 只有一两个列名是已知的，必须有条件地呈现
3. 不得使用辅助函数
4. 数据仅以数组形式提供。不是模型类

具有可变列数的典型数据集，其中 ID 是唯一已知始终提供的列:

[id*]   [Col-1]    [Col-2]    [Col-3]   ...(more)
 1      'Foo'      'Bar'      'Baz'    ...(more)
 2      'Foo'      'Bar'      'Baz'    ...(more)
 3      'Foo'      'Bar'      'Baz'    ...(more)
 ...
(more)

当前解决方案:将可变键名与常量键名混合在下面的这个例子中，可变键基于从数据源动态提供的各种列名，它们是 ("id"; "name"; "legal_name"; "email"; "signon_email"; "editable") 和常量键名是“字段”

示例数组:

array (size=6)
  0 => 
    array (size=2)
      'id' => string '10' (length=2)
      'field' => string 'id' (length=2)
  1 => 
    array (size=2)
      'value' => string 'J. Doe' (length=8)
      'field' => string 'name' (length=8)
  2 => 
    array (size=2)
      'value' => string 'Jane Doe' (length=8)
      'field' => string 'legal_name' (length=8)
  3 => 
    array (size=2)
      'value' => string 'Jane@Doe.com' (length=12)
      'field' => string 'email' (length=12)


array (size=6)
  0 => 
    array (size=2)
      'id' => string '11' (length=2)
      'field' => string 'id' (length=2)
  1 => 
    array (size=2)
      'value' => string 'Jon Doe' (length=8)
      'field' => string 'name' (length=8)
  2 => 
    array (size=2)
      'value' => string 'John Doe' (length=8)
      'field' => string 'legal_name' (length=8)
  3 => 
    array (size=2)
      'value' => string 'John@Doe.com' (length=12)
      'field' => string 'email' (length=12)

模板:

{{#rows}}
    <tr>{{#fields}}
            <td>{{#id}}<a href="foo/{{id}}">{{id}}</a>{{/id}}
                {{^id}}{{field}}: {{value} {{/id}}
            </td>
        {{/fields}}
    </tr>
{{/rows}}

结果:

<tr>
        <td><a href="foo/10">10</a></td>
        <td>name: J Doe</td>
        <td>legal_name: Jane Doe</td>
        <td>email: Jane@Doe.com</td>
</tr>
<tr>
        <td><a href="foo/11">11</a></td>
        <td>name: Jon Doe</td>
        <td>legal_name: John Doe</td>
        <td>email: John@Doe.com</td>
</tr>

数据冗余不是问题，因为数据集非常小。最重要的是，我们想要一个语言中立的解决方案(没有 lambda)。

Answer 1

很多人都可以在Mustache中找到这个关于动态行的问题。所以，我会发布我的解决方案。也许对某人有用。

模板一(表格)

<script type="text/template" id="template-table">
     <table class="table table-responsive">
        {{{dynamicRow}}}
     </table>
</script>

模板二(表格行)

<script type="text/template" id="template-table-row">
    <tr>
    <td>{{disciplina}}</td>
    <td>{{nota}}</td>
    </tr>
</script>

有一个 Ajax 响应解决方案(jQuery):

var row = [], $item_row = {};

//iterator for rows
$.each(response.notas, function(){
    $item_row.disciplina = this.disciplina;
    $item_row.nota = this.nota;

    var $template = $("#template-table-row").html();
    row.push(Mustache.render($template, $item_row));
});

//var row contain all rows, so add it to table
var item = {
    dynamicRow: row
}
var $template = $("#template-table").html();
var output = Mustache.render($template, item);

alert("Finish. Result is on Console");
console.log(output);

希望这对您有所帮助。