3

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

问题：使用 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 '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>

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

4

1 回答 1

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

希望这可以帮助。

于 2018-05-28T18:26:40.353 回答