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 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 Template:

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

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

dimusic · Accepted Answer · 2013-02-09 21:09:07Z

13

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/

answered Feb 9, 2013 at 21:09

dimusic

4,1332 gold badges31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muers Over a year ago

Oh, duh! Thank you! The irony is that I was just doing a test in a sandbox using the <div> tag for the template, but in dev/prod code we use <script> tags and this is the first time this has happened so I didn't even think of that. Thanks again :)

ehed · Accepted Answer · 2013-05-27 21:03:55Z

4

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.

answered May 27, 2013 at 21:03

ehed

8721 gold badge9 silver badges18 bronze badges

Collectives™ on Stack Overflow

Mustache Template with Nested Array of Objects

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related