Mustache Template with Nested Array of Objects

Question

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 mist

Answer 1

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/

Answer 2

Another solution that I found works is to comment out the mustache like so:

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

For me, it rendered exactly as I had hoped. I think the browser kind of freaks seeing code between tr tags.