JSON 对象到 Mustache.js 表中

Posted 2023-03-05

【中文标题】JSON 对象到 Mustache.js 表中

【英文标题】：JSON Object into Mustache.js Table

【发布时间】：2014-09-15 10:15:50

【问题描述】：

我正在尝试使用 Mustache.js 创建一个带有 JSON 对象的表。 我希望它显示两行，但它只显示第二行。 我怀疑第一行在循环中再次被绑定时被第二行覆盖。

我该如何解决？还是我应该遵循更好的结构？

javascript：

var text = '["Fullname":"John", "WorkEmail":"[e-mail]","Fullname":"Mary", "WorkEmail":"[e-mail]"]'
var obj = JSON.parse(text);

$(document).ready(function() 
        var template = $('#user-template').html();
        for(var i in obj)
        
        var info = Mustache.render(template, obj[i]);
        $('#ModuleUserTable').html(info);
        
); 

模板：

<script id="user-template" type="text/template">
    <td>FullName</td>
    <td>WorkEmail</td>
</script>

表：

<table border="1">
<tr>
<th>FullName</th>
<th>WorkEmail</th>
</tr>
<tr id = "ModuleUserTable"> 
</tr> 
</table>

【参考方案1】：

除了您自己的解决方案外，您还应该考虑使用 mustache 为您重复该行：

<script id="user-template" type="text/template">
#people
<tr>
    <td>FullName</td>
    <td>WorkEmail</td>
</tr>
/people
</script>

 

var text = '["Fullname":"John", "WorkEmail":"[e-mail]","Fullname":"Mary", "WorkEmail":"[e-mail]"]'
var obj = people: JSON.parse(text);

$(document).ready(function() 
    var template = $('#user-template').html();
    var info = Mustache.render(template, obj);
    $('#ModuleUserTable').html(info);
);

【参考方案2】：

我发现不是

$('#ModuleUserTable').html(info);

应该是：

$('#ModuleUserTable').append(info);

模板应该是：

<script id="user-template" type="text/template">
<tr>
    <td>FullName</td>
    <td>WorkEmail</td>
</tr>
</script>

并且 ID 不应出现在表格行标记上。相反，它应该在桌子上：

<table border="1"  id = "ModuleUserTable>
<tr>
<th>FullName</th>
<th>WorkEmail</th>
</tr>
</table>

在追加的那一刻，它会在包含 JSON 数据的表中添加一个新行。