Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

3.552 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

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}}

×