Javascript 具有嵌套对象数组的胡须模板

可能需要一些帮助来找出我的胡子模板无法正确渲染的原因。我很困惑为什么下面的方法不起作用。我肯定这是我的一个小错误或是别的什么

   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>

{{#行}
{{name}}
{{{#值}}
{{.}}
{{/values}}
{{/行}

我希望表中的每个数组项都是自己的行，但我得到的是：

[对象对象]

---

这里有一个jsFiddle来说明：

问题是浏览器将模板作为无效的表元素处理。将模板存储在这样的页面上不是一个好主意，请使用

包装它们：

<script id="mustache-template" type="text/template">
    <table>
      {{#rows}}
        <tr class="">
          <td>{{name}}</td>
          {{#values}}
            <td>{{.}}</td>
          {{/values}}
        </tr>
      {{/rows}}
    </table>
</script>

{{#行}
{{name}}
{{{#值}}
{{.}}
{{/values}}
{{/行}

---

我发现另一个可行的解决方案是这样注释掉胡子：

<div id="mustache-template">
    <table>
        <tbody>
             <!--  {{#rows}} -->
                <tr class="">
                  <td>{{name}}</td>
                  {{#values}}
                    <td>{{.}}</td>
                  {{/values}}
                </tr>
              <!-- {{/rows}} -->
        </tbody>
    </table>
</div>

{{name}}
{{{#值}}
{{.}}
{{/values}}

---

对我来说，这完全是我所希望的。我认为浏览器在

tr

标签之间看到代码是一种怪胎

哦，糟了！非常感谢。讽刺的是，我只是在沙箱中使用模板的标记进行测试，但在dev/prod代码中我们使用标记，这是第一次发生这种情况，所以我甚至没有想到这一点。再次感谢：）