使用在骨干/下划线的模板循环 [英] Using loops in backbone/underscore's templates

问题描述

我有一个Backbone.js的/ underscore.js，我送入渲染骨干视图模板。视图是通过包含数组的模型帖子的对象（这就是我称之为后模板）。

问题：当我尝试遍历数组帖子，我得到一个错误未捕获的所有元素语法错误：意外的令牌），指在骨干视图的code行模板：_.template（$（'＃tpl_SetView）HTML（））。

我是在做错误的循环，这是造成这个错误？

模板code

 ＆LT;脚本类型=文/模板ID =tpl_SetView＆GT;
    ＆LT; D​​IV CLASS =row_4＆GT;
        ＆LT; D​​IV CLASS =photo_container＆GT;
            ＆LT; D​​IV CLASS =set_cover＆GT;
                ＆所述; IMG SRC =/＆下;％=帖[0] .thumb_subpath％GT;＆下;％=帖[0] .img_filename％gt;中宽= 240 /＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =set_thumbs＆GT;
                ＆LT;％= _.each（帖子，功能（POST）{％GT;
                    ＆所述; IMG SRC =＆下;％= post.thumb_subpath％GT;＆下;％= posts.img_filename％gt;中宽度= 55 /＆GT;
                ＆下;（％）=}）; ％GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
 

解决方案

要呼应一个变量可以使用＆LT;％=％＆GT; ，而是要分析的javaScript code，只要使用＆LT; %%方式＆gt;

例如：

  //在您的骨干查看
VAR帖= {上岗：this.model.toJSON（）};
VAR模板= _.template（$（＃tpl_SetView）HTML（），职位）;
//在模板
＆LT; D​​IV CLASS =row_4＆GT;
    ＆LT; D​​IV CLASS =photo_container＆GT;
        ＆LT; D​​IV CLASS =set_cover＆GT;
            ＆LT; IMG SRC =/＆LT;％= _.escape（帖[0] .thumb_subpath）％GT;＆LT;％= _.escape（帖[0] .img_filename）％GT;宽= 240 /＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =set_thumbs＆GT;
        ＆LT;％_.each（帖子，功能（POST）{％GT;
            ＆所述; IMG SRC =＆下;％= _.escape（post.thumb_subpath）％GT;＆下;％= _.escape（posts.img_filename）％＆gt;中宽度= 55 /＆GT;
        ＆所述;％}）; ％GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

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>

解决方案

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>

这篇关于使用在骨干/下划线的模板循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！