jquery.tmpl.jsのテンプレートを外部化して動的に読み込みつつレンダリングするには？
クライアントサイドのテンプレートエンジンは色々あるけれど、JSPに慣れた人間からするとjquery.tmpl.jsが一番わかりやすかった。
BorisMoore/jquery-tmpl · GitHub
ただ、このライブラリは開発が停止している。このライブラリをフォークして開発が続けられているのがこちららしい。
KanbanSolutions/jquery-tmpl · GitHub
こちらのサンプルを参考にすると本当に簡単にできた。
jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive
もはや、サーバーサイドのCPUを使ってHTMLをレンダリングする時代じゃないんだなというのを実感。
ただ、サンプル通りにやるとHTMLのコードが読みづらくなったりエディターでフォーマットしづらくなる。
その辺をどうにかしたいと思って簡単なサンプルアプリケーションを作ってみた。
「行を追加」というボタンをクリックするとlinesパラグラフに行番号と追加日時の行が追加されるというアプリケーション。この行のレンダリングにテンプレートエンジンを使う。
サンプルコード一式
HTMLのコードはこんな風。
ごらんの通り、HTMLにはテンプレートが含まれていない。ここが第１のポイント。
サンプルではHTMLの中にscriptタグを書いて、その中にテンプレートを書いているけれど、これだとエディターでフォーマットがしづらくなる。
そこでまず、行のテンプレートを_template.htmlというファイルに外部化する。外部化すればエディターでフォーマットしやすい。
そして、この_template.htmlをHTTPのGETで動的に読み込む。そのためにはjQueryのgetが使える。ここが第２のポイント。
これはJSPで言えば「@ include file="_template.html"」的なものだ。
main.jsはこんな風。
初期化後、ボタンをクリックするとaddLine()が呼び出されて、置換するパラメーターを作り、テンプレートエンジンでテンプレートを変換し、その変換された行がlinesパラグラフに追加される。
うん。これでスッキリ！
BorisMoore/jquery-tmpl · GitHub
ただ、このライブラリは開発が停止している。このライブラリをフォークして開発が続けられているのがこちららしい。
KanbanSolutions/jquery-tmpl · GitHub
こちらのサンプルを参考にすると本当に簡単にできた。
jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive
もはや、サーバーサイドのCPUを使ってHTMLをレンダリングする時代じゃないんだなというのを実感。
ただ、サンプル通りにやるとHTMLのコードが読みづらくなったりエディターでフォーマットしづらくなる。
その辺をどうにかしたいと思って簡単なサンプルアプリケーションを作ってみた。
「行を追加」というボタンをクリックするとlinesパラグラフに行番号と追加日時の行が追加されるというアプリケーション。この行のレンダリングにテンプレートエンジンを使う。
サンプルコード一式
HTMLのコードはこんな風。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JSPライクにテンプレート</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.tmpl.js"></script>
<script src="main.js"></script>
</head>
<body>
<p><button onclick="addLine();">行を追加</button></p>
<p id="lines"></p>
</body>
</html>
ごらんの通り、HTMLにはテンプレートが含まれていない。ここが第１のポイント。
サンプルではHTMLの中にscriptタグを書いて、その中にテンプレートを書いているけれど、これだとエディターでフォーマットがしづらくなる。
そこでまず、行のテンプレートを_template.htmlというファイルに外部化する。外部化すればエディターでフォーマットしやすい。
<div><strong>${lineNum}.</strong> ${date}</div>
そして、この_template.htmlをHTTPのGETで動的に読み込む。そのためにはjQueryのgetが使える。ここが第２のポイント。
これはJSPで言えば「@ include file="_template.html"」的なものだ。
main.jsはこんな風。
//テンプレート
var $template = null;
//行番号
var lineNum = 0;
//初期化
$(document).ready(function() {
//_template.htmlをHTTP GETで読み込んで$templateに代入
$.get("_template.html", function(tmpl) { $template = tmpl; });
});
//行を追加するメソッド
function addLine() {
//行番号インクリメント
lineNum++;
//置換に使うパラメーターオブジェクト作成
var obj = new Object();
obj.lineNum = lineNum;
obj.date = new Date();
//テンプレートをパラメーターオブジェクトの値で置換してlineのパラグラフに追加
$.tmpl($template, obj).appendTo("#lines");
} // END addLine()
初期化後、ボタンをクリックするとaddLine()が呼び出されて、置換するパラメーターを作り、テンプレートエンジンでテンプレートを変換し、その変換された行がlinesパラグラフに追加される。
うん。これでスッキリ！
コメント
コメントを投稿