Question

7

Using loops in backbone/underscore's templates

rated 0 times [ 9] [ 2] / answers: 1 / hits: 41479 / 12 Years ago, thu, august 2, 2012, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brendan

Add To Favorites

Follow

Total Points: 426

Total Questions: 110

Total Answers: 94

Location: Western Sahara

Member since Mon, May 3, 2021

3 Years ago

brendan questions

1 React/ Redux select filtering and sorting using selectors

Mon, Jul 27, 20, 00:00, 4 Years ago

1 Can I use `expect.stringContaining()` inside a Jest `.toHaveBeenCalledWith()` block?

Thu, Apr 30, 20, 00:00, 4 Years ago

1 Module parse failed: Unexpected token (9:37) with babel-loader

Mon, Mar 30, 20, 00:00, 4 Years ago

1 How to dynamically display an image in VueJS?

Wed, Jan 22, 20, 00:00, 4 Years ago

1 bootstrap 4 validation disable submit button until form validated

Thu, Nov 7, 19, 00:00, 5 Years ago

View All

answered 12 Years ago gregorio · Accepted Answer

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>