Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KnockjoutJS紹介
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Chihiro Naganuma
May 19, 2013
Programming
530
0
Share
KnockjoutJS紹介
KnockoutJSを調べて社内で発表してきたよ!
Chihiro Naganuma
May 19, 2013
More Decks by Chihiro Naganuma
See All by Chihiro Naganuma
Backbone.jsハンズオン
onjiro
1
270
Recomendation WEB+DB PRESS vol.68
onjiro
3
450
Welcome to study meeting in your company 2012
onjiro
1
370
He told me "You would be good to show your way"
onjiro
2
910
Other Decks in Programming
See All in Programming
Coding as Prompting Since 2025
ragingwind
0
640
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
shin1x1
0
310
PHPで TLSのプロトコルを実装してみる
higaki_program
0
730
へんな働き方
yusukebe
6
2.9k
AI Assistants for YourAngular Solutions @Angular Graz, March 2026
manfredsteyer
PRO
0
140
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて!
k0kubun
3
2.7k
AIコードレビューの導入・運用と AI駆動開発における「AI4QA」の取り組みについて
hagevvashi
0
590
Goの型安全性で実現する複数プロダクトの権限管理
ishikawa_pro
2
1.4k
ロボットのための工場に灯りは要らない
watany
12
3.3k
メッセージングを利用して時間的結合を分離しよう #phperkaigi
kajitack
3
540
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
n4mlz
0
270
Nuxt Server Components
wattanx
0
230
Featured
See All Featured
Designing Experiences People Love
moore
143
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Designing for humans not robots
tammielis
254
26k
Thoughts on Productivity
jonyablonski
76
5.1k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
120
Joys of Absence: A Defence of Solitary Play
codingconduct
1
330
Evolving SEO for Evolving Search Engines
ryanjones
0
170
Tell your own story through comics
letsgokoyo
1
880
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
250
We Have a Design System, Now What?
morganepeng
55
8.1k
Transcript
KnockoutJSհ ࣾͰհ͖ͯͨͭ͠ 2013/05/15 ͳ͕͵·ͪͻΖ
ͳ͕͵·ͪͻΖ • ˏonjiro_mohyahya • Ζ͙Β· • ͍͖͞ΜFuelPHPɾɾɾ • js/Java/Ruby/CSS •
Backbone.js͖͢ʔ
ࠓͷͳ͠
KnockoutJSʹ͍ͭͯ ௐͯΈͨΑ
• KnockoutJSͬͯ͜Μͳͷɻ • observable ͱ binding • ίʔυྔগͳΊ • ϚʔΫΞοϓͷมߋͦ͢͠͏
࣍ • KnockoutJSͱ • KnockoutJS͍ํ • ͰɺͲ͏Αʁ
࣍ • KnockoutJSͱ • KnockoutJS͍ํ • ͰɺͲ͏Αʁ
http://knockoutjs.com/
• jsͷϥΠϒϥϦ • ΫϥΠΞϯταΠυMV*ϑϨʔϜϫʔΫ • MVVM Patern
• jsͷϥΠϒϥϦ • ΫϥΠΞϯταΠυMV*ϑϨʔϜϫʔΫ • MVVM Patern
ΫϥΠΞϯταΠυ MV*ͷ͓͞Β͍
• ΫϥΠΞϯτଆjsίʔυͷෳࡶԽΛͳΜ ͱ͔͢Δٕज़ͷͻͱͭ • ຊͰBackbone.js͕༗໊
JavaScript
We love jQuery!!
But...
࠷ۙͷϦονͰෳࡶͳUIΛ jQuery͚ͩͰ࡞Δͱେม
jQueryͰͷ
Πϕϯτϋϯυϥͷத Ͱ৭ʑͬͪΌ͏
• DOM͔ΒσʔλऔΓग़͠ • AjaxͰαʔόʔͱσʔλͷΓͱΓ • දࣔͷߋ৽
ྫʣhttp://www.slideshare.net/slideshow/ embed_code/15645947?startSlide=19 ʢ56ຕ͘Β͍·Ͱʣ
• “ػೳ”ͱ”දࣔ”͕ҰମʹͳΓ͕ͪ • DOMʹػೳ͕ґଘ͕ͪ͠ • “දࣔ”มߋ͞Ε͍͢෦
ʔʼมߋʹऑ͍ :-p
ɾɾɾͱ͍͏Θ͚Ͱ
ΫϥΠΞϯταΠυMVC ϑϨʔϜϫʔΫͷ಄
”දࣔ”Λ”ػೳ”͔Β ͢Δ
• ػೳModelͷ • දࣔViewͷ • ػೳࣗମViewʹͳΔ͘ґଘ͠ͳ͍
• Observer PatternΛ࠾༻ • ModelͷมߋΛEventͰ͑Δ • View͕ModelΛࢹɺDOMΛॻ͖͑ ྫʣBackbone.jsͷ࡞ઓ
Model View HTML Server Backbone.EventΛ listen HTMLͷEventΛ listen
http://todomvc.com/
࣍ • KnockoutJSͱ • KnockoutJS͍ํ • ͰɺͲ͏Αʁ
࣮ࡍͷίʔυྫʢtodomvcͷجຊ෦͚ͩʣ http://onjiro.github.io/knockout-handson/public
None
• observable • binding
“observableͳViewModel”Λ “Viewʹbind”͢Δ
• Observer PatternΛ࠾༻ • View(html)←→ViewModelؒࣗಈө KnockoutJSͷ࡞ઓ
ViewModel HTML data-bindͰ੍ޚ ko.applyBinding Λࣗಈతʹө eventϋϯυϥʔద༻ KnockoutJS ࣗಈදࣔɾߋ৽ ͜Μͳײ͔͡ͳʁ
None
None
3छྨͷobservable 3छྨͷbinding
3छྨͷobservable 3छྨͷbinding
• ko.observable • ko.computed • ko.observableArray
3छྨͷobservable 3छྨͷbinding
• ςΩετͱελΠϧ • ίϯτϩʔϧϑϩʔ • ϑΥʔϜؔ࿈
ͱ͜ΖͰ
Ajaxαϙʔτʁ
• AjaxपΓͷऔΓܾΊͳ͍ http://knockoutjs.com/documentation/json-data.html • JSONͱϞσϧؒͷมαϙʔτ ko.toJS/ko.toJSON • JSON.stringifyී௨ʹ͑Δ
࣍ • KnockoutJSͱ • KnockoutJS͍ํ • ͰɺͲ͏Αʁ
• data-bind͕Ұݟ͖͍ • Backbone.jsΑΓίʔυྔݮΓͦ͏ • ݟ௨͠Α͍ɾɾɾ͔
data-bind͕ Ұݟ͖͍
• data-bindͷཛྷ • htmlͬͯviewͳΜ͡Όͳ͍ͷʁ • text, value͍͍͚Ͳ • click, submit,
etc... • Ͳ͏ͳΜͩʁ
Backbone.jsΑΓ ίʔυྔগͳ͍
• ҎԼ͕ࣗಈͳͷ͕ޮ͍͍ͯΔ • ೖྗΛModelʹө • Modelͷߋ৽Λը໘ʹө • foreachͰͷల։
ݟ௨͠Αͦ͞͏
• htmlݟ͍͢ • js ͳ͠ͰσβΠϯΘ͔Δ • େମͷಈ͖Θ͔Δɾɾɾ͔ • ϚʔΫΞοϓͷมߋͦ͢͠͏
ࠓͷݒ೦
• ಘҙύλʔϯΛΕͨࡍʹͲ͏ͩΖ ͏ʁ
• গ͠·ͱʹͬͯΈͳ͍ͱͳΜͱ ݴ͑ͳ͍ײ • Backbone.jsΑΓෳਓͷ։ൃ ָɾɾɾ͔ͳ͊ɻɻɻ
·ͱΊ
• observableͱbinding • ίʔυྔগͳΊ • ϚʔΫΞοϓͷมߋͦ͢͠͏
• http://tnakamura.hatenablog.com/entry/20120213/knockout • http://www.slideshare.net/shibayan/knockout-11523371 • http://www.slideshare.net/hakuraipod/knockout-14911482 • http://www.adobe.com/jp/devnet/html5/articles/getting- started-with-knockoutjs.html •
http://www.slideshare.net/tricknotes/introduction-for- browser-side-mvc ࢀߟ