Using for loops and if statement in Underscore.js templates?

Question

I need to put some UI logic in my underscore template but I am having a hard time getting the syntax down. I am using the template in an ASP.Net MVC .aspx view so I had to change the template settings to use {%= %}, {%- %}, and {% %}.

I am trying to generate a select list inside a table row using to model attributes, "SortOrderCount" and "CurrSortOrder".

This is what I have so far but it errors out and the i in my for loop gets outputted as a literal "i" character. The syntax is so awful...lol

  <td>{% if (CurrSortOrder) { %}
                <select> 
                   {% for (var i = 1; i <= {%= SortOrderCount %}; i++) { %}
                       <option value="{%= i %}" {%= i == CurrSortOrder ?      
                               selected="selected" : "" %}>{%= i %}</option>
                   {% } %} 
                </select>
      {% } %}
  </td>

EDIT - this what it looks now with Simon's code.

<option value="1" {%="(i" =="CurrSortOrder)" ?="" 'selected="selected" ''="" :="" ""="" %}="">1</option>

If you want logic in your templates you really might want to consider something a little more powerful than Underscore's template function (which is, by design, pretty minimal). I'd recommend looking at Moustache or Handlebars; both are very popular, and far more powerful than _.template. — machineghost
– machineghost, Commented Apr 24, 2013 at 22:57

Simon Boudrias · Accepted Answer · 2013-04-24 20:42:02Z

2

Remember strings are still strings in templates between {% %}. You have some unescaped string there.

Also, you cannot nest templates tags. Some cleanup is needed:

<td>{% if (CurrSortOrder) { %}
            <select> 
               {% for (var i = 1; i <= SortOrderCount; i++) { %}
                   <option value="{%= i %}" {%= (i == CurrSortOrder) ?      
                           'selected="selected"'' : "" %}>{%= i %}</option>
               {% } %} 
            </select>
{% } %}</td>

answered Apr 24, 2013 at 20:42

Simon Boudrias

44.9k16 gold badges109 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Smith Over a year ago

Thanks, that nearly solved the problem. The only think that isn't working is the selected item. The HTML for the <option> tags is <option value="2" {%="(i" =="CurrSortOrder)" ?="" 'selected="selected" ''="" :="" ""="" %}="">2</option>

Smith Over a year ago

The selected item isn't working because it showing the actual tertiary condition in the source html. Read the bottom of my original post.

Smith Over a year ago

Yea, that should be the problem. Thanks guys.

Collectives™ on Stack Overflow

Using for loops and if statement in Underscore.js templates?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related