Submit Search
Upload
Java scriptのテンプレートエンジンについて
•
3 likes
•
1,852 views
O
Oda Shinsuke
Follow
2012/04/29 鹿駆動勉強会 http://atnd.org/events/24587
Read less
Read more
Technology
Report
Share
Report
Share
1 of 16
Download Now
Download to read offline
Recommended
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
More Related Content
More from 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
More from 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 触ってみよう
Recently uploaded
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG-Audio
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析
sugiuralab
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024
Hideki Saito
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
Naomi Yamasaki
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
Takayuki Nakayama
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
honeshabri
チームで開発するための環境を整える
チームで開発するための環境を整える
onozaty
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))
yoshidakids7
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313
ssuserf8ea02
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
iPride Co., Ltd.
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
IGDA Japan SIG-Audio
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
iPride Co., Ltd.
Recently uploaded
(12)
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
チームで開発するための環境を整える
チームで開発するための環境を整える
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
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}}
Download Now