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
Chihiro Naganuma
May 19, 2013
Programming
0
520
KnockjoutJS紹介
KnockoutJSを調べて社内で発表してきたよ!
Chihiro Naganuma
May 19, 2013
Tweet
Share
More Decks by Chihiro Naganuma
See All by Chihiro Naganuma
Backbone.jsハンズオン
onjiro
1
250
Recomendation WEB+DB PRESS vol.68
onjiro
3
440
Welcome to study meeting in your company 2012
onjiro
1
360
He told me "You would be good to show your way"
onjiro
2
900
Other Decks in Programming
See All in Programming
TanStack DB ~状態管理の新しい考え方~
bmthd
2
320
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
450
Laravel Boost 超入門
fire_arlo
1
110
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.1k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
新世界の理解
koriym
0
140
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
460
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
120
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
470
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
Featured
See All Featured
Done Done
chrislema
185
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Language of Interfaces
destraynor
160
25k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Practical Orchestrator
shlominoach
190
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Become a Pro
speakerdeck
PRO
29
5.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
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 ࢀߟ