If conditional statements in Underscore.js

Question

I am using the _.template() function of underscorejs together with backbonejs. When using underscore.js v1.3.0, I could use an if statement as shown:

<script type="text/template" id="tpl_listing_list_item">
    <% if(<%= address_2 %>){%>, <%= address_2 %><%}%>
</script>

Problem: After updating to v1.3.3, I get the error Uncaught SyntaxError: Unexpected token ILLEGAL in the Javascript console. Has this feature been removed? Removing the if code fixes the error. If it's removed, is there another way to achieve the same thing?

Answer 1

In your if statement you've already escaped into interpolation mode, so the <%= is an illegal character.

This works when I use it in my browser with 1.3.3

<script type="text/template" id="tpl_listing_list_item">
    <% if(address_2){ %>, <%= address_2 %> <% } %>
</script>

Example:

var t = _.template('{% if(address_2){ %}, {{ address_2 }} {% } %}')
undefined
t({'address_2': 'test'});
", test "

(We use JSP so our template tags are {% %}, {{ }}, and {%- %} instead of the defaults, so excuse my tags)

Answer 2

tkone has it right but for a template like you have, you could use the special print function to clean up your tags:

You can also use print from within JavaScript code. This is sometimes more convenient than using <%= ... %>.

var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge."

So you could cut down on the noise like this:

<script type="text/template" id="tpl_listing_list_item">
    <% if(address_2){ print(', ', address_2) } %>
</script>

Demo: http://jsfiddle.net/ambiguous/UgATZ/