KnockjoutJS紹介

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

32. None

33. • observable • binding

34. “observableͳViewModel”Λ “Viewʹbind”͢Δ

35. • Observer PatternΛ࠾༻ • View(html)←→ViewModelؒ͸ࣗಈ൓ө KnockoutJSͷ࡞ઓ

36. ViewModel HTML data-bindͰ੍ޚ ko.applyBinding ஋Λࣗಈతʹ൓ө eventϋϯυϥʔద༻ KnockoutJS ࣗಈදࣔɾߋ৽ ͜Μͳײ͔͡ͳʁ

37. None
38. None

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 ࢀߟ