テンプレートエンジンJQuery TemplatesをJadeから利用する
特に、パラメータの参照が似ていてよく間違える。
JQueryっぽい方は「$」を使う、と覚えよう。
二つのテンプレートエンジンの違いについて
JadeもJQuery Templatesもテンプレートエンジンには違いないが、
Node.jsのWebフレームワークexpressにも搭載されているJadeと、
言わずとしれたJQueryの名を冠する(?) JQuery Templatesとでは役割が随分違う。
JadeはサーバサイドでテンプレートからHTMLを生成するのに対して、
JQuery Templateはクライアントサイドからこれを行う。
もちろん相互利用することも可能だが、それぞれのシンタックスが似ておりやや混乱してしまう。
Jade
インデントでHTMLの入れ子構造を表現する。
- var Image = "hello.png"
html
head
body
img(src="#{Image}")
このテンプレートから以下のHTMLが生成される。
<html> <head></head> <body><img src="hello.png"/></body> </html>
この例ではJade側で直接JavaScriptの変数を定義しているが、Node.jsで書かれたコード上の変数も普通に使えるので便利。
JQuery Templates
JQuery TemplatesをJade上から利用する時は以下のような感じになると思う。
鋳型ともいえるテンプレートにオブジェクトを流し込む。
もちろん、リストを流し込めばその分だけ反復してくれたりもする。
html
head
script(type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js")
script(type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js")
body
#example
script(id="example-tmpl" type="text/x-jquery-tmpl")
img(src="${Image}")
script(type="text/javascript")
|$('#example-tmpl').tmpl([{Image: 'Image1.png'}, {Image: 'Image2.png'}])
| .appendTo('#example')<html> <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> </head> <body> <div id="example"><img src="Image1.png"><img src="Image2.png"></div> <script id="example-tmpl" type="text/x-jquery-tmpl"><img src="${Image}"/></script> <script type="text/javascript"> $('#example-tmpl').tmpl([{Image: 'Image1.png'}, {Image: 'Image2.png'}]) .appendTo('#example') </script> </body> </html>
