0
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-tmpl A templating plugin for jQuery...
cト       cト /^、_ノ     | 、.__ つ       (.__ ̄ ̄ ̄ ̄       ・ ・                      ,. -─- 、._                                ,. ...
というわけで今日の LT は終了!
ではなく…
JsRenderhttps://github.com/BorisMoore/jsrender jQuery 公式ページに、リンクされている 新しいテンプレートエンジン  http://api.jquery.com/category/plugin...
DEMO 1http://shikadriven.apphb.com/index.html Twitter から #shikadriven で検索し一 覧表示
JsViewshttps://github.com/BorisMoore/jsviews JsRender をテンプレートエンジンに使っ て「データバインディング」を実現しま す
DEMO 2http://shikadriven.apphb.com/view.html Twitter の検索結果を書き換える
まとめjQuery Templates は開発止まってるJsRender が後継?JsViews で バインディングも可能日本語の情報少ないので、使って発信しよう!
デモで使ったテンプレートの紹介テンプレートには、Object/Array が渡せる   Array を渡した場合は、全ての要素に対してテ   ンプレートがレンダリングされる{{:propertyName}}    プロパティ値をそのまま出力する...
デモで使ったテンプレートの紹介{{for Object/Array ...}}…{{/for}   繰り返し構文というよりは、インラインの   ネストしたテンプレート   " "(スペース区切り)で、複数の   Object/Array を指定...
デモで使ったテンプレートの紹介#data   テンプレートに渡された Object   Array が渡されていた場合は、Array の 1   要素   使い方   {{:#data.query}}   {{for #data.results...
Upcoming SlideShare
Loading in...5
×

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

2,857

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,857
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Java scriptのテンプレートエンジンについて"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×