web-dev-qa-db-ja.com

バックボーン/アンダースコアのテンプレートでループを使用する

私は、backbone.js/underscore.jsテンプレートを持っています。これは、レンダリングのためにバックボーンビューにフィードします。ビューには、オブジェクトの配列posts（テンプレートではpostと呼びます）を含むモデルが渡されます。

問題：配列postsのすべての要素をループしようとすると、エラー_Uncaught SyntaxError: Unexpected token )_が表示され、バックボーンビューのコードtemplate: _.template( $('#tpl_SetView').html() )。

このエラーの原因となっているループを間違って実行していますか？

テンプレートコード

_<script type="text/template" id="tpl_SetView">
    <div class="row_4">
        <div class="photo_container">
            <div class="set_cover">
                <img src="/<%= posts[0].thumb_subpath %><%= posts[0].img_filename %>" width=240 />
            </div>
            <div class="set_thumbs">
                <%= _.each(posts, function(post) { %>
                    <img src="<%= post.thumb_subpath %><%= posts.img_filename %>" width=55 />
                <%= }); %>
            </div>
        </div>
    </div>
</script>
_
javascriptjquerybackbone.jsunderscore.js
26
Nyxynyx

変数をエコーするには<%= %>を使用しますが、javaScriptコードを解析するには<% %>を使用します。

例えば：

// In your Backbone View
var posts = {"posts": this.model.toJSON()};
var template = _.template($("#tpl_SetView").html(), posts);


// In your template
<div class="row_4">
    <div class="photo_container">
        <div class="set_cover">
            <img src="/<%= _.escape(posts[0].thumb_subpath) %><%= _.escape(posts[0].img_filename) %>" width=240 />
        </div>
    <div class="set_thumbs">
        <% _.each(posts, function(post){ %>
            <img src="<%= _.escape(post.thumb_subpath) %><%= _.escape(posts.img_filename) %>" width=55 />
        <% }); %>
        </div>
    </div>
</div>
51
James Woodruff

問題は次の行にあることがわかると思います。

<%= _.each(posts, function(post) { %>
    <img src="<%= post.thumb_subpath %><%= posts.img_filename %>" width=55 />
<%= }); %>

テンプレートを評価するためにアンダースコアが行うことの私の記憶から、これらの行はあまり意味がありません。 各<％= ..％>項目は個別に評価されます。つまり、それらは部分的な機能ブロックではなく、完全に評価可能な式でなければなりません。

編集：実際、ジェームズは正しい。 <％..％>は個別に定義できます（最終的にはすべてが大きなjavascript文字列になります）。エスケープされ、補間式は別個の式でなければなりません。

編集II：そうであっても、評価コンテキストでは、ファンクションブロックを使用すると、意図したとおりに評価できない可能性のある奇妙なjavascript文字列が作成される可能性があると思います...私はそれについて考える必要があります。それでも完全にうまくいくかもしれません。

4
JayC