underscore.jsのtemplate構文をを変更する

JSPやThymeleafとunderscore.jsのtemplateを使用したい場合に構文が認識されないため、underscore.jsの構文を変更したいという状況があると思います。
今回は、その構文の変更方法を記載したいと思います。
BackBone.js、Marionette.jsを使用している場合も同様です。

underscore.jsのcodeを見てみると以下のようになっています。

underscore.js[excerpt]

  _.templateSettings = {
    evaluate    : /<%([\s\S]+?)%>/g,
    interpolate : /<%=([\s\S]+?)%>/g,
    escape      : /<%-([\s\S]+?)%>/g
  };

上記の"<%"と"%>"の部分を他の記号に変更するとJSP等の構文と被らなくなるため、以下のように設定を変更する。
今回は、"<%"を"{{"と"%>"を"}}"に置き換えます。

customized

    _.templateSettings = {
        evaluate: /\{\{([\s\S]+?)\}\}/g,
        interpolate: /\{\{=([\s\S]+?)\}\}/g,
        escape: /\{\{-([\s\S]+?)\}\}/g
    };

HTMLのでの記載方法は、以下のようになります。

code

    <span>Item Name : {{ evaluate }} </span>
    <span>Item Name : {{= interpolate }} </span>
    <span>Item Name : {{- escape }} </span>