Java scriptのテンプレートエンジンについて
-
Upload
oda-shinsuke -
Category
Technology
-
view
2.818 -
download
0
description
Transcript of Java scriptのテンプレートエンジンについて
![Page 1: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/1.jpg)
JavaScript のテンプレートエンジンについて
2012/04/29 鹿駆動勉強会お だ
![Page 2: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/2.jpg)
自己紹介
織田 信亮 ( おだ しんすけ )大阪で開発者やってますSQLWorld 代表 (http://sqlworld.org/)
http://d.hatena.ne.jp/odashinsuke/@shinsukeoda
![Page 3: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/3.jpg)
JavaScript のテンプレートエンジンといえば…
![Page 4: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/4.jpg)
jQuery Templates !
![Page 5: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/5.jpg)
ご存じかもしれませんが…
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.
![Page 6: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/6.jpg)
ナ ゝ ナ ゝ / 十_ " ー ;=‐ |! |! c ト c ト / ^、 _ ノ | 、 .__ つ ( .__  ̄ ̄ ̄ ̄ ・ ・
,. -─- 、 ._ ,. -─v─- 、 ._ _ ,. ‐'´ `‐ 、 __, ‐'´ ヽ , ‐''´~ ` ´  ̄ `‐ 、 / ヽ、 _ / ) ≦ ヽ‐ノ '´ `‐ 、 / / ̄ ~`'''‐- 、 .._ ノ ≦ ≦ ヽ i. /  ̄ l 7 1 イ /l/| ヽ ヘ ヘ≦ , , ヘ 、 i ,! ヘ . / ‐- 、 ._ u |/ l |/ ! ! | ヾ ヾ ヽ_ 、 l イ /l/|/ ヽ l │ヘト、. | 〃、 ! ミ : -─ ゝ、 _ _ .l 二ヽ、 レ 、 __∠´ _ |/ | ! | | ヾ ヾ ヘト、 l !_ ヒ ; L (.:) _ ` ー '" 〈 :)_,` / r iヽ _(:)_i ' _(:)_/ ! ‐;- 、 、 __,._-─‐ ヽ . ,.-' 、 / `゙ i u ´ ヽ ! !{ ,! ` ( } ' (:) 〉 ´(.:) ` i |// ニ ! _ / :::::::! ,,.. ゝ ! ゙ ! ヽ ' . ゙ ! 7  ̄ | ト y'/_,,. -‐ ヘ :::::::::::::: ヽ、 r'´~ ` ''‐ / 、 ! 、 ‐ = ⊃ ニ /! ` ヽ " u ;-‐i´ ! \ :::::::::::::: ヽ ` ─ ー ' / ヽ ‐ - / ヽ `  ̄二 ) / ヽト、 i \、 :::::::::::::::.. 、 ~" / ヽ . _ __,. / // ヽ、 ー
![Page 7: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/7.jpg)
というわけで今日の LT は終了!
![Page 8: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/8.jpg)
ではなく…
![Page 9: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/9.jpg)
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
![Page 10: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/10.jpg)
DEMO 1
http://shikadriven.apphb.com/index.html
Twitter から #shikadriven で検索し一覧表示
![Page 11: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/11.jpg)
JsViews
https://github.com/BorisMoore/jsviews
JsRender をテンプレートエンジンに使って「データバインディング」を実現します
![Page 12: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/12.jpg)
DEMO 2
http://shikadriven.apphb.com/view.html
Twitter の検索結果を書き換える
![Page 13: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/13.jpg)
まとめ
jQuery Templates は開発止まってるJsRender が後継?JsViews で バインディングも可能日本語の情報少ないので、使って発信しよう!
![Page 14: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/14.jpg)
デモで使ったテンプレートの紹介
テンプレートには、 Object/Array が渡せるArray を渡した場合は、全ての要素に対してテンプレートがレンダリングされる
{{:propertyName}} プロパティ値をそのまま出力する
{{html:propertyName}} プロパティ値を組み込みの HTML エンコードで出力する
{{>propertyName}}{{html:propertyName } の代替構文
![Page 15: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/15.jpg)
デモで使ったテンプレートの紹介
{{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>
![Page 16: Java scriptのテンプレートエンジンについて](https://reader035.fdocument.pub/reader035/viewer/2022062418/556252b8d8b42a6c368b50cc/html5/thumbnails/16.jpg)
デモで使ったテンプレートの紹介
#dataテンプレートに渡された ObjectArray が渡されていた場合は、 Array の 1 要素使い方
{{:#data.query}}{{for #data.results}}…{{/for}}