Question

我是多层次嵌套视图结构的最后一步 - 复合视图的集合。

但是，基于图像信息数组，我正在尝试渲染引导轮播，其中具有最高priority_order的图像被赋予默认的“item active”类。

            <%=_.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>"}
            })%>

注意：以上只是手动漂亮打印此帖子。在实际代码中，删除换行符，否则您将获得：

Uncaught SyntaxError: Unexpected token ILLEGAL

完成所有操作后，仍然无法正确显示。我错过了什么，或者可以强调执行此操作吗？

Answer 1

你写它的方式是语法错误诱饵。（另外，使用字符串文字很大程度上违背了使用模板的目的，不是吗？）

我将逻辑部分使用代码块<% %>，渲染部分使用<%= %>，并将HTML作为标记，而不是字符串文字：

<% _.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>
  <%  } %>
<%  } %>

此外，这是一个拼写错误 - if (x.priority_order = 1) - 应该是等于运算符==。

JSFiddle

就像一个注释 - 如果由于某种原因你绝对不得不将标记推入字符串文字中，那么你就不能在字符串中添加新行。它必须像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>";

或者使用+附加字符串，如：

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>";

带有underscore.js和Backbone.marionette的Templating Bootstrap Carousel

1 个答案: