我想知道是否有比我当前解决以下问题更优雅的解决方案
问题:在以下情况下,使用 Mustache 从动态数组生成动态表:
- 总列数未知
- 只有一两个列名是已知的,必须有条件地呈现
- 不得使用辅助函数
- 数据仅以数组形式提供。不是模型类
具有可变列数的典型数据集,其中 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)。
最佳答案
很多人都可以在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);
希望这对您有所帮助。
关于mustache - 使用动态数组的 Mustache 动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16287138/