How to use if statements in underscore.js templates?

Question

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?

score 462 · Accepted Answer · edited Jan 29 '15 at 19:58

462

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.

edited Jan 29 '15 at 19:58

Stephen Fuhry

12,624
6
56
55

answered Aug 29 '11 at 13:26

Bobby

18,217
15
74
89

2

Works great, and just discovered that JS switch/case statements work nicely in template markup, too. – nickb Nov 09 '11 at 02:45
Awesome answer. Can you please also tell how can I use alternating classes when I am using templates? Like first
should get class a and next b?

DivinesLight

Nov 23 '11 at 07:18

4

@BlackDivine I know it's kind of late, but for alternating styles you should use ``:nth-child(even)`` and ``:nth-child(odd)`` CSS selectors, not change your template. – prayerslayer Aug 30 '13 at 08:41

its looking same as java scriptlets used for rendering variables in jsp – Dungeon Hunter Sep 05 '13 at 04:34

I ended up with this line at the end {{ } }}, because I had to change the <% %> wrapper and it still worked. – Nosebleed Feb 05 '15 at 12:24

You can even do conditional AND with double ampersand `&&` even if your editor flags it as bad – Ray Foss Oct 10 '17 at 14:54

score 80 · Answer 2 · answered Aug 04 '12 at 05:39

80

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.

answered Aug 04 '12 at 05:39

TonyTakeshi

5,869
10
51
72

4

[Conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator), which gets the nickname "ternary" since it's the only common ternary operator (three-operands). – Keen Oct 21 '14 at 20:17
1

Note that an occasional shortcoming of the technique proposed in this answer is that you're stuck doing string interpolation all over again, which templates are supposed to solve for you. As of right now, `_.template` inserts a `;` at the start of each compiled code tag. Thus, it can handle tags breaking between statements, but not inside of expressions. Compare`;if(a){b;}else{c;}` to `;a?b;:c;`. – Keen Oct 21 '14 at 20:19

score 21 · Answer 3 · answered Feb 17 '12 at 00:11

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>');
} %>

score 10 · Answer 4 · answered Feb 25 '13 at 06:08

10

Here is a simple if/else check in underscore.js, if you need to include a null check.

<div class="editor-label">
    <label>First Name : </label>
</div>
<div class="editor-field">
    <% if(FirstName == null) { %>
        <input type="text" id="txtFirstName" value="" />
    <% } else { %>
        <input type="text" id="txtFirstName" value="<%=FirstName%>" />
    <% } %>
</div>

answered Feb 25 '13 at 06:08

Yasser Shaikh

46,934
46
204
281

1

null is not the same as undefined, it would still produce an error – xorinzor Apr 02 '13 at 17:45
4

In this case it wouldn't matter, since he checks the value using ==, which will convert the value. Because of the type-conversion the following statement is true: null == undefined - Not endorsing that, just saying. – Johannes Lumpe Oct 26 '13 at 17:39
I think it's better to use `_.isEmpty()` – Nick Barrett Feb 05 '16 at 04:20

score 6 · Answer 5 · answered Jan 09 '13 at 19:23

Responding to blackdivine above (about how to stripe one's results), you may have already found your answer (if so, shame on you for not sharing!), but the easiest way of doing so is by using the modulus operator. say, for example, you're working in a for loop:

<% for(i=0, l=myLongArray.length; i<l; ++i) { %>
...
<% } %>

Within that loop, simply check the value of your index (i, in my case):

<% if(i%2) { %>class="odd"<% } else { %>class="even" <% }%>

Doing this will check the remainder of my index divided by two (toggling between 1 and 0 for each index row).

score 3 · Answer 6 · answered Jul 10 '14 at 08:43

3

You can try _.isUndefined

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>

answered Jul 10 '14 at 08:43

Damien

644
4
11

Beware the difference between "date is undefined" and "date is not defined". They should have called that error "No variable or global property exists with the name 'date'." The code you've proposed will still throw an exception if `date` doesn't exist at all. You really do need the `typeof` in this case, although it would be even better to use a named variable when we're duck-typing template data. – Keen Oct 21 '14 at 20:25

score 1 · Answer 7 · answered Oct 09 '15 at 03:01

From here:

"You can also refer to the properties of the data object via that object, instead of accessing them as variables." Meaning that for OP's case this will work (with a significantly smaller change than other possible solutions):

<% if (obj.date) { %><span class="date"><%= date %></span><% }  %>

score 0 · Answer 8 · edited Mar 02 '18 at 08:11

0

To check for null values you could use _.isNull from official documentation

isNull_.isNull(object)

Returns true if the value of object is null.

_.isNull(null);
=> true
_.isNull(undefined);
=> false

edited Mar 02 '18 at 08:11

Markus

2,071
4
22
44

answered Mar 02 '18 at 07:37

Cubiczx

1,005
11
10

How to use if statements in underscore.js templates?

8 Answers8

Linked