Templating Bootstrap Carousel with underscore.js and Backbone.marionette

Question

I am the last step of a multi-level, nested sturcture of views - a collection of composite views.

However, based on array of image information, I am trying to render the bootstrap carousel, where the image with the highest priority_order is given the default "item active" class.

            <%=_.each(images, function(x){
              if (x.priority_order = 1)
                {return 

                  "<div class='item active'>
                    <img class='responsive-image' src=" + x.image + " alt=''>
                    <div class='container'>
                      <div class='carousel-caption'>
                        <h1>" + x.title + "</h1>
                      </div>
                    </div>
                  </div>"
                }
              else
                {return

                  "<div class='item'>
                    <img class='responsive-image' src" + x.image + " alt=''>
                    <div class='container'>
                      <div class='carousel-caption'>
                        <h1>" + x.title + "</h1>
                      </div>
                    </div>
                  </div>"}
            })%>

NOTE: The Above is simply manually pretty-printed for this post. In the real code, the line breaks are removed, otherwise you'll get:

Uncaught SyntaxError: Unexpected token ILLEGAL

When all is said and done, this still doesn't render properly. Am I missing something, or can underscore perform do this?

Answer 1

The way you've got it written there is syntax-error bait. (Plus, using a string literal largely defeats the purpose of using a template, no?)

I'd use code blocks <% %> for the logic parts, <%= %> for the rendering parts, and have the HTML as markup, not as a string literal:

<% _.each(images, function(x){ %>
  <% if (x.priority_order == 1){ %>
    <div class='item active'>
      <img class='responsive-image' src=" + x.image + " alt=''>
      <div class='container'>
        <div class='carousel-caption'>
          <h1> <%= x.title %></h1>
        </div>
      </div>
    </div>
  <%  } %>
<%  } %>

Also, this is a typo -- if (x.priority_order = 1) -- should be the equality operator == .

JSFiddle

Just as a note -- if you absolutely have to putt the markup in a string literal for some reason, then you can't have new lines within the string. It has to be either inline like this :

print "<div class='item active'><img class='responsive-image' src='" + x.image + "' alt=''><div class='container'><div class='carousel-caption'><h1>" + x.title + "</h1></div></div></div>";

Or appending the strings with the + like:

print "<div class='item active'>" + 
    "<img class='responsive-image' src='" + x.image + "' alt=''>" + 
        "<div class='container'>" + 
            "<div class='carousel-caption'>" +
                "<h1>" + x.title + "</h1></div></div></div>";