CODEWITHSUNDEEP
javascriptunderscore.js
archienorman
archienorman

Reputation: 1454

Underscore.js adding if/else to each function

I am currently using a clndr.js calendar and underscore.js templates.

Looking for some help implementing an if/else statement within the underscore <% _.each function. 

<div class="days">
    <% _.each(days, function(day) { %>
    <div class="event <%= day.classes %>" id="<%= day.id %>">
        <div class="number"><%= day.day %></div>
        <% _.each(day.events, function(event){ %>
             <div class="event <%= event.val %>"></div>
        <% }) %>
    </div>
    <% }); %>
</div>

At the moment <div class="event <%= event.val %>"></div> is shown for each day in the calendar where an event exists, which is great. However, I also want to add a div for days when an event does not exist:

<div class="days">
    <% _.each(days, function(day) { %>
    <div class="<%= day.classes %>" id="<%= day.id %>">
        <div class="number"><%= day.day %></div>
        <% _.each(day.events, function(event){ %>

             # if the event exists, show this div
             <div class="event <%= event.val %>"></div>

             # else if the event does not exist, show this div:
             <div class="event none"></div>
        <% }) %>
    </div>
    <% }); %>
</div>

Upvotes: 0

Views: 1657

Answers (1)

Emile Bergeron
Emile Bergeron

Reputation: 17430

The fact that it's within a each callback doesn't change a thing. Underscore's template can use JavaScript directly.

<% if (event && event.val) { %>
    <div class="event <%= event.val %>"></div>
<% } else { %>
    <div class="event none"></div>
<% } %>

Or since your example is trivial, the following would be enough.

<div class="event <%= event.val || 'none' %>"></div>

Upvotes: 3

Related Questions