How to use if statements in underscore.js templates?

Dealing with undefined and null variables

Prevent "undefined" errors with typeof

Ensure your variables are defined before you use them in conditional statements to avoid rendering errors:

<% if (typeof user !== 'undefined' && user) { %>
    // Because... "Welcome, undefined" would be weird, right?
    Welcome, <%= user.name %>!
<% } %>


This safety check saves you from unwelcome "not defined" exceptions.

Null checks for data integrity

Handle potential null values in your data by including a condition for these scenarios:

<% if (user && user.name !== null) { %>
    // Because saying "Hello, null" isn't the best conversation starter.
    Hello, <%= user.name %>!
<% } else { %>
    Hello, stranger!
<% } %>


Anticipating null values preserves template integrity even when the data context is compromised.

Advanced constructs: Break down your if statements

Style with modulus for odd/even classes

Find style with the modulus operator for odd/even class styling within loops:

<% _.each(items, function(item, index) { %>
    <li class="<%= (index % 2 === 0) ? 'even' : 'odd' %>">Item <%= item.name %></li>
<% }); %>


This trick is about as useful for web design as a squirt of ketchup on a hot dog 🌭.

Shorthand syntax for compact if-else

Go compact with your conditional statements using shorthand syntax:

<% var greeting = (user && user.name) ? "Hello, " + user.name : "Hello, stranger"; %>
<p><%= greeting %></p>


Note: This syntax might cause brief, uncontrolled grinning 🙃 due to its elegance.

Embed variable values directly with print

Insert variables directly into your template by calling the print function:

<% print("Current user: " + user.name); %>


This is akin to photoshopping your content directly into the scene - neat and clear.

Dynamic data handling strategies

Fallback to default values

When dealing with undefined values, assign a default value for a smooth fallback:

<% var displayName = user.name || 'Guest'; %>
<p>Welcome, <%= displayName %>!</p>


Think of this as the search for intelligent life — if you can't find it, default to 'Guest' 👽.

Adjust templates to data context

Ensure your templates respond to varying data contexts:

<% if (user && user.permissions) { %>
    <% _.each(user.permissions, function(permission) { %>
        // Who needs Avengers when you have user permissions?
        <span class="permission"><%= permission %></span>
    <% }); %>
<% } %>


By tailoring templates to user states, you provide a customized experience — like their own episode of a TV show!

Level up: Master control structures in templates

Iterate with the power of JavaScript

Want to dynamically render lists or tables? Use standard JavaScript loops inside templates:

<% for(var i = 0; i < users.length; i++) { %>
    <% var user = users[i]; %>
    // Now rendering user no. <%= i %>... Hold on to your hats!
    <tr class='<%= (i % 2 == 0 ? "even" : "odd") %>'>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
    </tr>
<% } %>


Looping and conditional rendering together are like a perfect waltz in underscore.js templates.

Don't trip on dynamic data

Got dynamic or unpredictable model parameters? Use "typeof check":

<% if (typeof dynamicVar !== "undefined") { %>
    // "Oops! The dynamicVar is missing" - said no one ever after using this condition.
    Dynamic content: <%= dynamicVar %>
<% } %>


Avoids errors and excuse generation during runtime - Win-win (•◡•)/.

Balancing syntax for clarity

When using conditionals, balancing between conciseness and clarity can save the day :

<% var message = (typeof alert !== "undefined") ? alert.message : "default message"; %>
// Balance: it's not just for yoga anymore!
<div class="alert"><%= message %></div>


A well-laid balance optimizes both development and execution time, just like having both cookies and milk 🍪🥛.