KnockjoutJS紹介

 KnockjoutJS紹介

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

B4a500918bc6f08fb4f185a668affcbb?s=128

Chihiro Naganuma

May 19, 2013
Tweet

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