使用动态数组的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”）和常量键名是“field”

样本数组：

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 '[email protected]' (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 '[email protected]' (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: [email protected]</td>
</tr>
<tr>
        <td><a href="foo/11">11</a></td>
        <td>name: Jon Doe</td>
        <td>legal_name: John Doe</td>
        <td>email: [email protected]</td>
</tr>

由于数据集非常小，因此数据冗余不是问题。最重要的是，我们需要一种语言中立的解决方案（没有lambdas）。

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

希望这可以帮助。