Soumettre la recherche
Mettre en ligne
Java scriptのテンプレートエンジンについて
•
Télécharger en tant que PPTX, PDF
•
3 j'aime
•
1,852 vues
O
Oda Shinsuke
Suivre
2012/04/29 鹿駆動勉強会 http://atnd.org/events/24587
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 16
Télécharger maintenant
Recommandé
Silverlight(wp7) で ローカル db 使ってみよう
Silverlight(wp7) で ローカル db 使ってみよう
Oda Shinsuke
KnockoutJS の紹介
KnockoutJS の紹介
Oda Shinsuke
Annual Report 2008
Annual Report 2008
guest2f467f
Mongo db使ってみよう
Mongo db使ってみよう
Oda Shinsuke
照合順序をかる~く紹介します
照合順序をかる~く紹介します
Oda Shinsuke
クエリ通知使ってみよう
クエリ通知使ってみよう
Oda Shinsuke
Dot_fes2013
Dot_fes2013
cyberagent
SQL Server2022_PSPoptimization_pub.pdf
SQL Server2022_PSPoptimization_pub.pdf
Oda Shinsuke
Recommandé
Silverlight(wp7) で ローカル db 使ってみよう
Silverlight(wp7) で ローカル db 使ってみよう
Oda Shinsuke
KnockoutJS の紹介
KnockoutJS の紹介
Oda Shinsuke
Annual Report 2008
Annual Report 2008
guest2f467f
Mongo db使ってみよう
Mongo db使ってみよう
Oda Shinsuke
照合順序をかる~く紹介します
照合順序をかる~く紹介します
Oda Shinsuke
クエリ通知使ってみよう
クエリ通知使ってみよう
Oda Shinsuke
Dot_fes2013
Dot_fes2013
cyberagent
SQL Server2022_PSPoptimization_pub.pdf
SQL Server2022_PSPoptimization_pub.pdf
Oda Shinsuke
What's hyperscale
What's hyperscale
Oda Shinsuke
Dot net+sql server tips
Dot net+sql server tips
Oda Shinsuke
Sql server 2019 ざっくり紹介
Sql server 2019 ざっくり紹介
Oda Shinsuke
Spark on sql server?
Spark on sql server?
Oda Shinsuke
SQL Server のロック概要
SQL Server のロック概要
Oda Shinsuke
Blazor 触ってみた
Blazor 触ってみた
Oda Shinsuke
Linux + PHP でも SQL Server
Linux + PHP でも SQL Server
Oda Shinsuke
グラフデータベースの話し
グラフデータベースの話し
Oda Shinsuke
Sql server 2017 新機能のご紹介
Sql server 2017 新機能のご紹介
Oda Shinsuke
Sql server 2017 からはじめる graph データベース
Sql server 2017 からはじめる graph データベース
Oda Shinsuke
Transaction scopeまだダメ
Transaction scopeまだダメ
Oda Shinsuke
Sql serverと他dbの違いを押さえよう!
Sql serverと他dbの違いを押さえよう!
Oda Shinsuke
2016年を振り返って
2016年を振り返って
Oda Shinsuke
Sql world とは
Sql world とは
Oda Shinsuke
開発者の方向けの Sql server(db) t sql 振り返り
開発者の方向けの Sql server(db) t sql 振り返り
Oda Shinsuke
Sql world とは
Sql world とは
Oda Shinsuke
Ms build 触ってみよう
Ms build 触ってみよう
Oda Shinsuke
Sql server2014復習とsqlserver2016の紹介
Sql server2014復習とsqlserver2016の紹介
Oda Shinsuke
Sql server sql database 最新機能紹介
Sql server sql database 最新機能紹介
Oda Shinsuke
Selenium 触ってみよう
Selenium 触ってみよう
Oda Shinsuke
Contenu connexe
Plus de Oda Shinsuke
What's hyperscale
What's hyperscale
Oda Shinsuke
Dot net+sql server tips
Dot net+sql server tips
Oda Shinsuke
Sql server 2019 ざっくり紹介
Sql server 2019 ざっくり紹介
Oda Shinsuke
Spark on sql server?
Spark on sql server?
Oda Shinsuke
SQL Server のロック概要
SQL Server のロック概要
Oda Shinsuke
Blazor 触ってみた
Blazor 触ってみた
Oda Shinsuke
Linux + PHP でも SQL Server
Linux + PHP でも SQL Server
Oda Shinsuke
グラフデータベースの話し
グラフデータベースの話し
Oda Shinsuke
Sql server 2017 新機能のご紹介
Sql server 2017 新機能のご紹介
Oda Shinsuke
Sql server 2017 からはじめる graph データベース
Sql server 2017 からはじめる graph データベース
Oda Shinsuke
Transaction scopeまだダメ
Transaction scopeまだダメ
Oda Shinsuke
Sql serverと他dbの違いを押さえよう!
Sql serverと他dbの違いを押さえよう!
Oda Shinsuke
2016年を振り返って
2016年を振り返って
Oda Shinsuke
Sql world とは
Sql world とは
Oda Shinsuke
開発者の方向けの Sql server(db) t sql 振り返り
開発者の方向けの Sql server(db) t sql 振り返り
Oda Shinsuke
Sql world とは
Sql world とは
Oda Shinsuke
Ms build 触ってみよう
Ms build 触ってみよう
Oda Shinsuke
Sql server2014復習とsqlserver2016の紹介
Sql server2014復習とsqlserver2016の紹介
Oda Shinsuke
Sql server sql database 最新機能紹介
Sql server sql database 最新機能紹介
Oda Shinsuke
Selenium 触ってみよう
Selenium 触ってみよう
Oda Shinsuke
Plus de Oda Shinsuke
(20)
What's hyperscale
What's hyperscale
Dot net+sql server tips
Dot net+sql server tips
Sql server 2019 ざっくり紹介
Sql server 2019 ざっくり紹介
Spark on sql server?
Spark on sql server?
SQL Server のロック概要
SQL Server のロック概要
Blazor 触ってみた
Blazor 触ってみた
Linux + PHP でも SQL Server
Linux + PHP でも SQL Server
グラフデータベースの話し
グラフデータベースの話し
Sql server 2017 新機能のご紹介
Sql server 2017 新機能のご紹介
Sql server 2017 からはじめる graph データベース
Sql server 2017 からはじめる graph データベース
Transaction scopeまだダメ
Transaction scopeまだダメ
Sql serverと他dbの違いを押さえよう!
Sql serverと他dbの違いを押さえよう!
2016年を振り返って
2016年を振り返って
Sql world とは
Sql world とは
開発者の方向けの Sql server(db) t sql 振り返り
開発者の方向けの Sql server(db) t sql 振り返り
Sql world とは
Sql world とは
Ms build 触ってみよう
Ms build 触ってみよう
Sql server2014復習とsqlserver2016の紹介
Sql server2014復習とsqlserver2016の紹介
Sql server sql database 最新機能紹介
Sql server sql database 最新機能紹介
Selenium 触ってみよう
Selenium 触ってみよう
Java scriptのテンプレートエンジンについて
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 1 イ/l/|ヘ ヽヘ ≦ , ,ヘ 、 i ,!ヘ. / ‐- 、._ u |/ l |/ ! ! | ヾ ヾ ヽ_、l イ/l/|/ヽlヘト、 │ . |〃、!ミ: -─ゝ、 __ .l レ二ヽ、 、__∠´_ |/ | ! | | ヾ ヾヘト、 l !_ヒ; L(.:)_ `ー'"〈:)_,` / riヽ_(:)_i '_ (:)_/ ! ‐;-、 、__,._-─‐ヽ. ,.-'、 /`゙i u ´ ヽ ! !{ ,! ` ( } ' (:)〉 ´(.:)`i |//ニ ! _/:::::::! ,,..ゝ! ゙! ヽ ' .゙! 7  ̄ | ト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}}
Télécharger maintenant