Using loops in backbone/underscore's templates

Question

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>

I think it is better to organize the code to new models and views. Looping through templates in not good practice — chchrist
I'm curious why you think looping through a template is bad practice. I just implemented the answer shown by James Woodruff below for the use of building a list of select options (which vary depending on the situation) and it seems to me a lot easier to just loop through the array of options rather than making a separate view called 'selectOption' or whatever and then iteratively appending it to the <select>. is there something i'm missing? — Dallas Caley

James Woodruff James Woodruff · Accepted Answer · 2012-08-02T15:44:09

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>

Using loops in backbone/underscore's templates

2 Answers