带有嵌套对象数组的Mustache模板
Mustache Template with Nested Array of Objects
可能需要一些帮助来弄清楚为什么我的Mustache模板没有正确渲染。我很困惑为什么以下不起作用。我相信这是我犯的一个愚蠢的小错误。。。
var tableRows = [
{name: 'name1',
values: ['1','2','3']},
{name: 'name2',
values: ['1','2','3']},
{name: 'name3',
values: ['1','2','3']}
];
var template = $('#mustache-template').html();
$('#target').append(Mustache.render(template, {rows: tableRows}));
HTML模板:
<div id="mustache-template">
<table>
<tbody>
{{#rows}}
<tr class="">
<td>{{name}}</td>
{{#values}}
<td>{{.}}</td>
{{/values}}
</tr>
{{/rows}}
</tbody>
</table>
</div>
我期望一个表,每个数组项都是自己的行,但我得到的却是:
[object Object]
下面是一个jsFiddle来说明:http://jsfiddle.net/gF9ud/
问题是浏览器将模板处理为无效的表元素。将模板存储在这样的页面上不是一个好主意,请使用<script type="text/template">
包装它们:
<script id="mustache-template" type="text/template">
<table>
{{#rows}}
<tr class="">
<td>{{name}}</td>
{{#values}}
<td>{{.}}</td>
{{/values}}
</tr>
{{/rows}}
</table>
</script>
http://jsfiddle.net/zHkW5/
我发现有效的另一个解决方案是这样注释掉胡子:
<div id="mustache-template">
<table>
<tbody>
<!-- {{#rows}} -->
<tr class="">
<td>{{name}}</td>
{{#values}}
<td>{{.}}</td>
{{/values}}
</tr>
<!-- {{/rows}} -->
</tbody>
</table>
</div>
对我来说,这完全是我所希望的。我认为浏览器看到tr
标签之间的代码有点奇怪。
相关文章:
- 如何配置browserfy与Karma使用转换Stringify为Mustache模板
- 数据绑定到Mustache模板?(最好干净简单)
- 使用Webpack加载Mustache模板
- 如何为具有嵌套对象的 JSON 数据创建 Mustache 模板
- 重用另一个模板中的 Mustache 模板,如果两者都在一个 html 文件中定义
- 属性名称未知的Mustache模板
- 在Mustache模板中嵌入一个Twitter共享按钮(包含JS和所有内容)
- 在视图之间传递Mustache模板数据
- Scala:如何在Finatra中的Mustache模板中包含JS脚本
- 如何获取Mustache模板的所有可用变量
- 如何使用Mustache模板将选项添加到下拉列表中
- 使用jQuerygetJSON将JSON数据的嵌套对象返回到Mustache模板
- 使用对象数组的Mustache模板
- 如何在Mustache模板中处理IF语句
- 在mustache模板中对点击事件执行函数
- 如何在js中从mustache模板中读取动态数据id值
- 在knockout.js中使用mustache模板
- 如何在Mustache模板中使用jQuery内置函数
- Mustache模板-使用数组值作为对象键
- 组合多个mustache模板,然后渲染HTML