javascript - 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 を記述し、次に HTML、さらに JavaScript、ループまたは if/else 条件を <% %> 内の別の場所で閉じる必要があることです。

このようなコードは、JSP ページ (JavaServer Pages) の初期の頃 (スクリプトレットでさえ同じ表記法を使用) に非常によく似ており、このようなアプローチはしばしばメンテナンスやデバッグの問題を引き起こしたことを覚えています。ここでも同様の問題がありました。スクリプトレットはテンプレート エンジンによって実際の JavaScript に変換されますが、これは分析が容易ではありません。

テンプレートをより適切に処理する方法はありますか? バックエンドでできるだけ多くのフィルタリングやデータ準備をしようとしても、典型的なフロントエンド ロジックが常に必要になります (何かを強調表示するなど)。