Underscore JS模板最佳实践 - 如何避免将JavaScript与HTML混合

Question

我想知道是否有一种很好的方法可以避免在BackboneJS / UnderscoreJS模板应用程序中混用JavaScript和HTML。

我的理解是我们需要创建模板代码，它看起来或多或少是这样的：

<table cellspacing='0' cellpadding='0' border='1' >
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>

        <% _.each(items,function(item,key,list){ %>
        <% var f = item.name; %>
            <tr>
                <td><%= key %></td>
                <td class="<%= f %>"><%= item.name %></td>
            </tr>
        <% }); %> <!-- this is hardly readable -->
    </tbody>
</table>

那，困扰我的是编写JavaScript的必要性，在＆lt; %%＆gt;里面scriptlet，然后是一些HTML，然后再一些JavaScript，一个循环或if / else条件必须在＆lt; %%＆gt;内的其他地方关闭。

这样的代码在很早的JSP页面（JavaServer Pages）中类似于我 - 甚至scriptlet使用相同的表示法 - 我记得这种方法经常导致维护和调试问题。在这里我遇到了类似的问题 - scriptlet被模板引擎转换为实际的JavaScript，这不容易分析。

有没有办法更好地处理模板？即使我尝试在后端进行尽可能多的过滤，数据准备，也总是需要一些典型的前端逻辑（比如突出显示某些内容等）？