在主干/下划线的模板中使用循环

时间:2012-08-02 15:34:27

标签: javascript jquery backbone.js underscore.js

我有一个backbone.js / underscore.js模板,我将其添加到骨干视图中进行渲染。 View传递的模型包含一个对象数组posts(我在模板中称之为post)。

问题:当我尝试遍历数组posts的所有元素时,我收到错误Uncaught SyntaxError: Unexpected token )并引用主干View视图中的一行代码{{ 1}}。

我是否错误地进行了循环,导致此错误?

模板代码

template: _.template( $('#tpl_SetView').html() )

2 个答案:

答案 0 :(得分:51)

要回显变量use <%= %>,但要解析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>

答案 1 :(得分:4)

我认为你会发现问题出在以下几个方面:

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

从我对下划线对评估模板的作用的回忆,这些行没有多大意义。 每个&lt;%= ..%&gt; item被单独评估..也就是说,它们必须是完全可评估的表达式,而不是部分功能块..

编辑:实际上,詹姆斯是对的。 &LT;%..%GT;可以单独定义(最终归结为一个大的javascript字符串)。它被转义并且插值表达式必须是单独的表达式。

编辑II:即便如此,在评估环境中我认为使用功能块仍然可能会创建一个可能无法按预期评估的混乱javascript字符串......我不得不考虑它。它可能仍然完全正常。