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

【问题标题】：Using loops in backbone/underscore's templates在主干/下划线模板中使用循环
【发布时间】：2012-08-02 15:34:26
【问题描述】：

我有一个backbone.js/underscore.js 模板，我将其输入到主干视图中进行渲染。视图传递了一个模型，该模型包含对象数组posts（我在模板中将其称为post）。

问题：当我尝试遍历数组posts 的所有元素时，我收到错误Uncaught SyntaxError: Unexpected token ) 并引用主干视图代码template: _.template( $('#tpl_SetView').html() ) 中的一行。

我执行的循环不正确导致了这个错误吗？

模板代码

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

【问题讨论】：

我认为将代码组织到新模型和视图中会更好。在不好的做法中循环遍历模板
我很好奇为什么你认为循环遍历模板是不好的做法。我刚刚实现了下面 James Woodruff 显示的答案，用于构建选择选项列表（视情况而定），在我看来，仅循环遍历选项数组而不是制作单独的视图要容易得多称为“selectOption”或其他任何内容，然后将其迭代地附加到

标签： javascript jquery backbone.js underscore.js

【解决方案1】：

要回显变量使用<%= %>，但要解析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>

【讨论】：

【解决方案2】：

我想你会发现问题出在以下几行：

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

根据我对 underscore 评估模板的作用的回忆，这些行没有多大意义。 ~~每个项都是单独评估的。也就是说，它们必须是完全可评估的表达式，而不是部分功能块。..~~

编辑：实际上，詹姆斯是对的。可以单独定义（最终归结为一个大的javascript字符串）。它被转义并且被插值的表达式必须是单独的表达式。

编辑二：即便如此，在评估上下文中，我认为功能块的使用仍然可能会创建一个奇怪的 javascript 字符串，它可能不会像预期的那样评估......我必须考虑一下。它可能仍然完全正常。

【讨论】：