Question

I have Javascript object like:

var data = {
    Id: 1,
    Name: "Some name",
    Days: [true, true, true, false, false, true, false]
};

These objects are generated on the client and I want to visualise them by using jQuery.tmpl plugin. I’ve defined a template to be:

<ul class="days">
{{each Days}}
    <li class="day {{if $value}}on{{else}}off{{/if}}">${$index + 1}</li>
{{/each}}
</ul>

When I call

$("<ul class='days'>...</ul>").tmpl(data);

I only get a set of LI elements and no wrapping UL around them…

What am I missing here?

Answer 1

You need to move that template code to a <script> element (if you haven’t already), like this:

<script type="text/x-jquery-tmpl" id="daysTemplate">
  <ul class="days">
  {{each Days}}
    <li class="day {{if $value}}on{{else}}off{{/if}}">${$index + 1}</li>
  {{/each}}
  </ul>
</script>

Then, select and render that template like this:

// You can inject the result into any container, using methods like appendTo()
//  html(), insert(), etc.
$('#daysTemplate').tmpl(data).appendTo('body');