带嵌套数组对象的小胡子模板 [英] Mustache Template with Nested Array of Objects

问题描述

可以使用一些帮助来弄清楚为什么我的Mustache模板无法正确呈现。我很困惑，为什么以下不起作用。我确定这是我的一个小愚蠢的错误或其他......

Could use a little help figuring out why my Mustache template isn't rendering properly. I'm very confused why the following isn't working. I'm sure it's a minor stupid mistake of mine or something...

   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>

我期待一个表，每个数组项都是自己的行，但我得到了这个：

I'm expecting a table with each array item being its own row, but instead I'm getting this:

[object Object]

这里是一个jsFiddle来说明： http://jsfiddle.net/gF9ud/

Here's a jsFiddle to illustrate: http://jsfiddle.net/gF9ud/

推荐答案

问题是浏览器将模板作为无效的表元素处理。将模板存储在这样的页面上并不是一个好主意，使用< script type =text / template> 来包装它们：

The problem is that the browser handles your template as an invalid table element. It's not a good idea to store your templates on a page like that, use <script type="text/template"> to wrap them:

<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/

这篇关于带嵌套数组对象的小胡子模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！