How to use if statements in underscore.js templates?
I'm using the underscore.js templating function and have done a template like this:
<script type="text/template" id="gridItem">
<div class="griditem <%= gridType %> <%= gridSize %>">
<img src="<%= image %>" />
<div class="content">
<span class="subheading"><%= categoryName %></span>
<% if (date) { %><span class="date"><%= date %></span><% } %>
<h2><%= title %></h2>
</div>
</div>
</script>
As you can see I have an if statement in there because all of my models won't have the date parameter. However this way of doing it gives me an error date is not defined . So, how can I do if statements within a template?
This should do the trick:
<% if (typeof(date) !== "undefined") { %>
<span class="date"><%= date %></span>
<% } %>
Remember that in underscore.js templates if and for are just standard javascript syntax wrapped in <% %> tags.
If you prefer shorter if else statement, you can use this shorthand:
<%= typeof(id)!== 'undefined' ? id : '' %>
It means display the id if is valid and blank if it wasn't.
Depending on the situation and or your style, you might also wanna use print inside your <% %> tags, as it allows for direct output. Like:
<% if (typeof(id) != "undefined") {
print(id);
}
else {
print('new Model');
} %>
And for the original snippet with some concatenation:
<% if (typeof(date) != "undefined") {
print('<span class="date">' + date + '</span>');
} %>
上一篇: underscore.js嵌套模板