Underscore templating: Can't get switch to work

underscore.js, underscore.js-templating

Solution

The problem is that Underscore will add semicolon terminators when converting your template to JavaScript. So, a simple `switch` like this:

<% switch(x) { %>
<% case 11: %>
    <button>
<% } %>

becomes JavaScript that looks like this:

switch(x) { ;
case 11: ;
    // something to output '<button>' goes here
} ;

But a JavaScript `switch` needs to contain `case` statements and an empty statement (i.e. the `;` in `switch(x) { ;`) doesn't qualify.

I can't think of any sane way around this problem so I'd just switch to an `if` and move on to more interesting problems:

<% if(UserType === 13) { %>
    <button id="schoolButton" value="schools" class="gridChooser k-textbox">Schools</button> 
<% } else if(UserType === 12) { %>
    <button id="teacherButton" value="teachers" class="gridChooser k-textbox">Teacher</button> 
<% } else if(UserType === 8) { %>
    <button id="classButton" value="classes" class="gridChooser k-textbox">Classes</button> 
    <button id="testButton" value="tests" class="gridChooser k-textbox">Test</button> 
<% } %>

You could also turn it inside-out and use `print`:

<% switch(UserType) {
   case 13:
       print('<button id="schoolButton" ...');
   ...
} %>

but that's a bit ugly (IMHO). See the `_.template` documentation for details.

Note that this semicolon trickery is also why your `if`s must include braces in an Underscore template even if JavaScript doesn't require them. So this won't work:

<% if(pancakes) %>
    <%= pancakes %>

but this will:

<% if(pancakes) { %>
    <%= pancakes %>
<% } %>

The same applies to loops.

Problem

Original source