$30 off During Our Annual Pro Sale. View Details »
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
まだ間に合う!Claude Code元年をふりかえる
nogu66
5
900
tparseでgo testの出力を見やすくする
utgwkk
2
290
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
130
Cell-Based Architecture
larchanjo
0
140
gunshi
kazupon
1
120
Patterns of Patterns
denyspoltorak
0
360
GoLab2025 Recap
kuro_kurorrr
0
780
PC-6001でPSG曲を鳴らすまでを全部NetBSD上の Makefile に押し込んでみた / osc2025hiroshima
tsutsui
0
190
脳の「省エネモード」をデバッグする ~System 1(直感)と System 2(論理)の切り替え~
panda728
PRO
0
120
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
karad
0
140
AtCoder Conference 2025
shindannin
0
650
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
kanamasa
11
4.1k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
13k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.7k
The Cult of Friendly URLs
andyhume
79
6.7k
Tell your own story through comics
letsgokoyo
0
770
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
520
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Highjacked: Video Game Concept Design
rkendrick25
PRO
0
250
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
110
Building a Scalable Design System with Sketch
lauravandoore
463
34k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
57
40k
Mind Mapping
helmedeiros
PRO
0
39
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 ࢀߟ