0

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

但是，基于图像信息数组，我正在尝试渲染引导轮播，其中优先级最高的图像被赋予默认的“项目活动”类。

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

当一切都说完了，这仍然不能正确渲染。我是否遗漏了什么，或者下划线可以执行此操作吗？

4

1 回答 1

3

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

我会<% %>为逻辑部分、<%= %>渲染部分使用代码块，并将 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

就像一个注释——如果你出于某种原因绝对必须将标记放入字符串文字中，那么你不能在字符串中包含新行。它必须是这样的内联：

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>";
于 2012-12-15T08:03:02.223 回答