KnockjoutJS紹介

KnockoutJSを調べて社内で発表してきたよ！

Transcript

1. KnockoutJS঺հ ࣾ಺Ͱ঺հ͖ͯͨ͠΍ͭ 2013/05/15 ͳ͕͵·ͪͻΖ
2. ͳ͕͵·ͪͻΖ • ˏonjiro_mohyahya • ΀Ζ͙Β· • ͍͖͞ΜFuelPHPɾɾɾ • js/Java/Ruby/CSS • Backbone.js͖͢ʔ
3. ࠓ೔ͷ͸ͳ͠
4. KnockoutJSʹ͍ͭͯ ௐ΂ͯΈͨΑ
5. • KnockoutJSͬͯ͜Μͳͷɻ • observable ͱ binding • ίʔυྔগͳΊ • ϚʔΫΞοϓͷมߋ͠΍ͦ͢͏
6. ໨࣍ • KnockoutJSͱ͸ • KnockoutJS࢖͍ํ • ͰɺͲ͏Αʁ
7. ໨࣍ • KnockoutJSͱ͸ • KnockoutJS࢖͍ํ • ͰɺͲ͏Αʁ
8. http://knockoutjs.com/
9. • jsͷϥΠϒϥϦ • ΫϥΠΞϯταΠυMV*ϑϨʔϜϫʔΫ • MVVM Patern
10. • jsͷϥΠϒϥϦ • ΫϥΠΞϯταΠυMV*ϑϨʔϜϫʔΫ • MVVM Patern
11. ΫϥΠΞϯταΠυ MV*ͷ͓͞Β͍
12. • ΫϥΠΞϯτଆjsίʔυͷෳࡶԽΛͳΜ ͱ͔͢Δٕज़ͷͻͱͭ • ೔ຊͰ͸Backbone.js͕༗໊
13. JavaScript
14. We love jQuery!!
15. But...
16. ࠷ۙͷϦονͰෳࡶͳUIΛ jQuery͚ͩͰ࡞Δͱେม
17. jQueryͰͷ໰୊఺
18. Πϕϯτϋϯυϥͷத Ͱ৭ʑ΍ͬͪΌ͏
19. • DOM͔ΒσʔλऔΓग़͠ • AjaxͰαʔόʔͱσʔλͷ΍ΓͱΓ • දࣔͷߋ৽
20. ྫʣhttp://www.slideshare.net/slideshow/ embed_code/15645947?startSlide=19 ʢ56ຕ໨͘Β͍·Ͱʣ
21. • “ػೳ”ͱ”දࣔ”͕ҰମʹͳΓ͕ͪ • DOMʹػೳ͕ґଘ͕ͪ͠ • “දࣔ”͸มߋ͞Ε΍͍͢෦෼
22. ʔʼมߋʹऑ͍ :-p
23. ɾɾɾͱ͍͏Θ͚Ͱ
24. ΫϥΠΞϯταΠυMVC ϑϨʔϜϫʔΫͷ୆಄
25. ”දࣔ”Λ”ػೳ”͔Β ෼཭͢Δ
26. • ػೳ͸Modelͷ੹຿ • දࣔ͸Viewͷ੹຿ • ػೳࣗମ͸ViewʹͳΔ΂͘ґଘ͠ͳ͍
27. • Observer PatternΛ࠾༻ • ModelͷมߋΛEventͰ఻͑Δ • View͕ModelΛ؂ࢹɺDOMΛॻ͖׵͑ ྫʣBackbone.jsͷ࡞ઓ
28. Model View HTML Server Backbone.EventΛ listen HTMLͷEventΛ listen
29. http://todomvc.com/
30. ໨࣍ • KnockoutJSͱ͸ • KnockoutJS࢖͍ํ • ͰɺͲ͏Αʁ
31. ࣮ࡍͷίʔυྫʢtodomvcͷجຊ෦෼͚ͩʣ http://onjiro.github.io/knockout-handson/public
33. • observable • binding
34. “observableͳViewModel”Λ “Viewʹbind”͢Δ
35. • Observer PatternΛ࠾༻ • View(html)←→ViewModelؒ͸ࣗಈ൓ө KnockoutJSͷ࡞ઓ
36. ViewModel HTML data-bindͰ੍ޚ ko.applyBinding ஋Λࣗಈతʹ൓ө eventϋϯυϥʔద༻ KnockoutJS ࣗಈදࣔɾߋ৽ ͜Μͳײ͔͡ͳʁ
39. 3छྨͷobservable 3छྨͷbinding
40. 3छྨͷobservable 3छྨͷbinding
41. • ko.observable • ko.computed • ko.observableArray
42. 3छྨͷobservable 3छྨͷbinding
43. • ςΩετͱελΠϧ • ίϯτϩʔϧϑϩʔ • ϑΥʔϜؔ࿈
44. ͱ͜ΖͰ
45. Ajaxαϙʔτ͸ʁ
46. • AjaxपΓͷऔΓܾΊ͸ͳ͍ http://knockoutjs.com/documentation/json-data.html • JSONͱϞσϧؒͷม׵͸αϙʔτ ko.toJS/ko.toJSON • JSON.stringify΋ී௨ʹ࢖͑Δ
47. ໨࣍ • KnockoutJSͱ͸ • KnockoutJS࢖͍ํ • ͰɺͲ͏Αʁ
48. • data-bind͕Ұݟ͖΋͍ • Backbone.jsΑΓίʔυྔݮΓͦ͏ • ݟ௨͠͸Α͍ɾɾɾ͔΋
49. data-bind͕ Ұݟ͖΋͍
50. • data-bindͷཛྷ • htmlͬͯviewͳΜ͡Όͳ͍ͷʁ • text, value͸͍͍͚Ͳ • click, submit, etc... • Ͳ͏ͳΜͩʁ
51. Backbone.jsΑΓ ίʔυྔগͳ͍
52. • ҎԼ͕ࣗಈͳͷ͕ޮ͍͍ͯΔ • ೖྗΛModelʹ൓ө • Modelͷߋ৽Λը໘ʹ൓ө • foreachͰͷల։
53. ݟ௨͠͸Αͦ͞͏
54. • html͸ݟ΍͍͢ • js ͳ͠Ͱ΋σβΠϯΘ͔Δ • େମͷಈ͖΋Θ͔Δɾɾɾ͔΋ • ϚʔΫΞοϓͷมߋ͠΍ͦ͢͏
55. ࠓͷݒ೦
56. • ಘҙύλʔϯΛ཭ΕͨࡍʹͲ͏ͩΖ ͏ʁ
57. • গ͠·ͱ΋ʹ࢖ͬͯΈͳ͍ͱͳΜͱ΋ ݴ͑ͳ͍ײ • Backbone.jsΑΓෳ਺ਓͷ։ൃ͸ ָɾɾɾ͔ͳ͊ɻɻɻ
58. ·ͱΊ
59. • observableͱbinding • ίʔυྔগͳΊ • ϚʔΫΞοϓͷมߋ͠΍ͦ͢͏
60. • 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 ࢀߟ