JavaScript のテンプレートエンジンについて

2012/04/29 鹿駆動勉強会お だ

自己紹介

織田 信亮 ( おだ しんすけ )大阪で開発者やってますSQLWorld 代表 (http://sqlworld.org/)

http://d.hatena.ne.jp/odashinsuke/@shinsukeoda

JavaScript のテンプレートエンジンといえば…

jQuery Templates ！

ご存じかもしれませんが…

jQuery Templates は非推奨になりました

beta のまま開発終了https://github.com/jquery/jquery-tmplA templating plugin for jQuery. BETA. NO LONGER IN ACTIVE DEVELOPMENT OR MAINTENANCE. Issues remain open but are not being worked.

　　　　　　　　　ナ ゝ　　　ナ ゝ　 / 　 　 十＿ " 　 　 ー ;=‐ 　　　　　　　　　 |! |!　　　　　　　　　　 c ト　　　　 c ト　 / ＾､ _ 　 ﾉ | ､ .__ 　つ　 （ .__ 　 ￣￣￣￣ 　 ・ ・

　　　　　　　　　　　 ,. -─- ､ ._ 　　　　　　　　　　　　 　 ,. -─v─- ､ ._ 　　　　　＿　 　 　 　 　 　 ,. ‐'´ 　　　　　　 `‐ 　　　　　　　　､ __, ‐'´ 　　 　 　 　 　 ヽ , ‐''´~ 　　 ｀ ´ ￣ `‐ ､　　　　　　　／　　　　　　　　　　　ヽ､ _ ／ ) 　　 ≦　　　　　　　　　ヽ‐ﾉ '´ 　　　　　　　　　 　 `‐ ､　　　　　　 / 　　　　 ／￣ ~`'''‐- ､ .._ 　　　ノ　　　≦　　　　　　　　 ≦　　　　　　　　　　　　　　 ヽ　　　　　　 i. 　　　／　　　　　　　　 ￣ l 　 7 　　　　１　 ｲ /l/| ヽ 　ﾍ ﾍ≦　　　 , 　 , 　　 　 　 　 　 ﾍ ､ i　　　　　　 ,! ヘ . 　 / ‐- ､ ._ 　　　 u 　　　　 |/ 　　　　　 l |/ ! 　 ! | ヾ ヾ ヽ_ ､ l 　ｲ /l/|/ ヽ l 　　　　　　│ﾍﾄ､. 　　　　　 | 〃､ ! ﾐ : 　　 -─ ゝ、　 　 ＿ _ .l 　 　 　 　 二ヽ、 ﾚ ､ __∠´ ＿ |/ | 　 ! | 　 | ヾ ヾ 　　　 ﾍﾄ､ l　　　　　　 !_ ﾋ ; 　　　 Ｌ (.:) ＿ ` ｰ '" 〈 :)_,` / 　　　　 　 r ｉヽ _(:)_i 　　 ' ＿(:)_/ ! ‐;- 　 ､ ､ __,._-─‐ ヽ . 　 ,.-' ､　　　　　　 / ｀ﾞ i 　 u 　 　 　 ´ 　　　 ヽ　 ! 　　　 　 　 !{ 　　　 ,! 　　 ` 　　 （ } ' (:) 〉　　 ´(.:) ｀ i 　 　 |// ﾆ !　　　　 _ ／ :::::::! 　　　　　　 　 　 　 ,,.. ゝ ! 　　　　　　 ﾞ ! 　　 ヽ ' 　　　　　 . ﾞ ! 　７　　　 ￣　　　　 | ﾄ y'/_,,. -‐ ﾍ :::::::::::::: ヽ、　　　 r'´~ ｀ ''‐ 　 ／　　　　　　　 ､ ! 、　 ‐ = ⊃　 　 ﾆ /! 　 ` ヽ " 　　　　 u 　 　 ;-‐i´　 ! 　 　 ＼ :::::::::::::: ヽ　　　 ` ─ ｰ ' 　／　　 　 　 　 　 　 ヽ　　‐ - 　　 ／　ヽ　 ` ￣二 ) 　　　 　 / ヽﾄ､　 i 　　 　 ＼､ :::::::::::::::.. 　　､ ~" 　／　　　　　　　　　　　　 ヽ . ＿ __,. ／　　// ヽ、　ー

というわけで今日の LT は終了！

ではなく…

JsRender

https://github.com/BorisMoore/jsrender

jQuery 公式ページに、リンクされている新しいテンプレートエンジンhttp://api.jquery.com/category/plugins/templates/

文字列ベースで、 DOM や jQuery にも依存しないhttp://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

DEMO 1

http://shikadriven.apphb.com/index.html

Twitter から #shikadriven で検索し一覧表示

JsViews

https://github.com/BorisMoore/jsviews

JsRender をテンプレートエンジンに使って「データバインディング」を実現します

DEMO 2

http://shikadriven.apphb.com/view.html

Twitter の検索結果を書き換える

まとめ

jQuery Templates は開発止まってるJsRender が後継？JsViews で バインディングも可能日本語の情報少ないので、使って発信しよう！

デモで使ったテンプレートの紹介

テンプレートには、 Object/Array が渡せるArray を渡した場合は、全ての要素に対してテンプレートがレンダリングされる

{{:propertyName}} プロパティ値をそのまま出力する

{{html:propertyName}} プロパティ値を組み込みの HTML エンコードで出力する

{{>propertyName}}{{html:propertyName ｝ の代替構文

デモで使ったテンプレートの紹介

{{for Object/Array ...}}…{{/for}繰り返し構文というよりは、インラインのネストしたテンプレート" "( スペース区切り ) で、複数の Object/Array を指定出来るインラインテンプレートは、外出し可能<script id="mainTmpl" type="text/x-jsrender">{{for Object/Array ... tmpl="#extTmpl" /}}</script><script id="extTmpl" type="text/x-jsrender"> 〜</script>

デモで使ったテンプレートの紹介

#dataテンプレートに渡された ObjectArray が渡されていた場合は、 Array の 1 要素使い方

{{:#data.query}}{{for #data.results}}…{{/for}}