I have Javascript object like:
var data = {
Id: 1,
Name: "Some name",
Days: [开发者_Python百科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?
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');
I created a fiddle here and it works. template
<script id="daysTemplate" type="text/x-jquery-tmpl">
<ul class="days">
{{each Days}}
<li class="day {{if $value}}on{{else}}off{{/if}}">${$index + 1}</li>
{{/each}}
</ul>
</script>
script
var data = {
Id: 1,
Name: "Some name",
Days: [true, true, true, false, false, true, false]
};
$("#daysTemplate").tmpl(data).appendTo('body');
精彩评论