0

これは、マルチレベルのネストされたビューの構造 (複合ビューのコレクション) の最後のステップです。

ただし、画像情報の配列に基づいて、ブートストラップ カルーセルをレンダリングしようとしています。ここでは、priority_order が最も高い画像にデフォルトの「アイテム アクティブ」クラスが与えられます。

            <%=_.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 に答える