JSP で jQuery Templates が使えないのを回避する方法

Templates – jQuery API

先日、オフィシャルに取り入れられることが発表された jQuery Templates ですが、みごとに JSP の EL式と構文がかぶっているため、 JSP で jQuery Templates が使えません。

例えば、オフィシャルサイトの以下の例ですが、

<script>
  var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  { Name: "The Inheritance", ReleaseYear: "1976" }
  ];

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

/* Compile the markup as a named template */
$.template( "movieTemplate", markup );

/* Render the template with the movies data and insert
   the rendered HTML under the "movieList" element */
$.tmpl("movieTemplate", movies).appendTo("#movieList");
</script>

JSP 中に書くと、${Name}, ${ReleaseYear} が消えて、markup が以下のようになってしまいます。

var markup = "<li><b></b> ()</li>";

独自のテンプレートを書くという選択肢もあったのですが、標準で入るものを使わないというのも嫌だったので、今回は外部テンプレートを利用することでこれを回避します。

回避方法

1. 外部テンプレートを読み込んでそのまま利用
2. 外部テンプレートを script タグとして埋め込む

個人的には、template から template を呼び出せる 2番目の方法がオススメ。

外部テンプレートを読み込んでそのまま利用

Using external templates with jQuery Templates » Encosia

上記で紹介されている方法です。

movieTemplate.txt という名前で、以下のようなテンプレートを用意します。

<li><b>${Name}</b> (${ReleaseYear})</li>

これを Ajax で読み込んで利用します。

$.get("movieTemplate.txt", function(template) {
  $.tmpl(template, movies).appendTo("#movieList");
});

外部テンプレートを script タグとして埋め込む

2010/11/23 追記: この方法は IE では動作しませんでした。

<%@ page isELIgnored="true" %>

を指定した上で、jsp:include で外部ファイルとして読み込む方法が、現時点での回避策です。

テンプレートを用意するところまでは同じ。
movieTemplate.txt という名前で、以下のようなテンプレートを用意します。

<li><b>${Name}</b> (${ReleaseYear})</li>

このテンプレートを script タグとして埋め込んで、id 指定で利用します。

function loadTemplate(id, url) {
  $.ajax({
    type: 'GET',
    url: url,
    dataType: 'text',
    async: false, // 同期で読み込んでいることに注意
    success: function(template) {
      $('<script>')
	.attr({'id':id, 'type':'text/x-jquery-tmpl'})
	.text(template)
	.appendTo('body');
    }
  });
}

loadTemplate("movieTemplate", "movieTemplate.txt");

$("#movieTemplate").tmpl(movies).appendTo("#movieList");

これで、JSP から jQuery Templates が使えるようになります。
ついでにテンプレートを外部ファイル化できるので、デザイナさんとの作業の分離、とか、テンプレートの動的変更とか色々と楽になって１石２鳥です。