jQueryプラグインのテンプレートエンジン
jQueryクックブックのレシピ17.4(p.428)にて、テンプレートエンジンの紹介がありました。「PURE」という名前のjQueryプラグインです。
jsのテンプレートエンジンは、以前にjTemplatesの採用を検討したのですが見送ってました。（理由は忘れた。多分なんとなく）
なので、jTemplatesも含めていまいちど検討してみようと思います。
jTemplates
テンプレートの定義
テキストファイルで用意する。
テンプレートの指定方法
ラッパーオブジェクトのsetTemplateURL()の引数にテンプレートファイルをURLで指定し、ラッパーオブジェクトのprocessTemplate()の引数にjsonを渡す。
実際のソースコード
$(document).ready(function() { $.getJSON("./json.aspx", function(data) { $("#result").setTemplateURL("./index.tpl"); $("#result").processTemplate(data); }); });
PURE
実際のソースコード(オートレンダリング）
<html>
<head>
<script src="jquery.js"></script>
<script src="pure.js"></script>
</head>
<body>
<div class="who"></div>
<script>
var data = {who:'Hello Wrrrld!'};
$('div.who').autoRender(data);
</script>
</body>
</html>
実際のソースコード（ディレクティブによるレンダリング）
<!-- HTML template --> <div class="template"> Hello <a></a> </div> <script> var data = {'who':'BeeBole!', site:'http://beebole.com'}, directive = { 'a':'who', //look for the tag 'a' and place the value of the property 'who' in its node value 'a@href':'site' //look for the tag a, and set its attribute 'href' to the value of the property 'site' } //note the use of render instead of autoRender and the 2nd parameter with directive $('div.template').render(data, directive); </script>
