2012/04/29 鹿駆動勉強会 http://atnd.org/events/24587

1. JavaScript の
テンプレートエンジンについて
2012/04/29 鹿駆動勉強会
お だ

2. 自己紹介
織田 信亮(おだ しんすけ)
大阪で開発者やってます
SQLWorld 代表(http://sqlworld.org/)
http://d.hatena.ne.jp/odashinsuke/
@shinsukeoda

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

4. jQuery Templates！

5. ご存じかもしれませんが…
jQuery Templates は非推奨になりました
beta のまま開発終了
https://github.com/jquery/jquery-tmpl
A templating plugin for jQuery. BETA. NO LONGER
IN ACTIVE DEVELOPMENT OR MAINTENANCE.
Issues remain open but are not being worked.

6. 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､ ＼:::::::::::::::..､ ~" ／ ヽ.＿__,.／

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

8. ではなく…

9. JsRender
https://github.com/BorisMoore/jsrender
jQuery 公式ページに、リンクされている
新しいテンプレートエンジン
http://api.jquery.com/category/plugins/tem
plates/
文字列ベースで、DOM や jQuery にも依
存しない
http://www.borismoore.com/2011/10/jquery-
templates-and-jsviews-roadmap.html

10. DEMO 1
http://shikadriven.apphb.com/index.html
Twitter から #shikadriven で検索し一
覧表示

11. JsViews
https://github.com/BorisMoore/jsviews
JsRender をテンプレートエンジンに使っ
て「データバインディング」を実現しま
す

12. DEMO 2
http://shikadriven.apphb.com/view.html
Twitter の検索結果を書き換える

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

14. デモで使ったテンプレートの紹介
テンプレートには、Object/Array が渡せる
Array を渡した場合は、全ての要素に対してテ
ンプレートがレンダリングされる
{{:propertyName}}
プロパティ値をそのまま出力する
{{html:propertyName}}
プロパティ値を組み込みの HTML エンコード
で出力する
{{>propertyName}}
{{html:propertyName｝ の代替構文

15. デモで使ったテンプレートの紹介
{{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>

16. デモで使ったテンプレートの紹介
#data
テンプレートに渡された Object
Array が渡されていた場合は、Array の 1
要素
使い方
{{:#data.query}}
{{for #data.results}}…{{/for}}