Using loops in backbone/underscore's templates

问题:

I have a backbone.js/underscore.js template that I am feeding into a backbone view for rendering. The View is passed a model that contains an array posts of objects (which I call post in the template).

Problem: When I try to loop through all the elements of the array posts, I get an error Uncaught SyntaxError: Unexpected token ) and refers a line in the backbone View's code template: _.template( $('#tpl_SetView').html() ).

Am I doing the loop incorrectly which is causing this error?

Template code

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

回答1:

To echo a variable use <%= %>, but to parse javaScript code, just use <% %>.

For example:

// 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>

回答2:

I think you will find that the problem is in these lines:

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

From my recollection of what underscore does to evaluate templates, these lines don't make much sense. Each <%=..%> item is evaluated separately.. that is, they must be full evaluatable expressions, not partial function blocks..

Edit: Actually, James is right. <%..%> can be defined separately (it all comes down to a big javascript string in the end). It is escaped and the interpolated expressions that must be separate expressions.

Edit II: Even so, in the evaluation context I think the use of the function block would still possibly create a bizzare javascript string that might not evaluate quite as intended... I'd have to think about it. It might still work out totally fine.