Upgrade to Pro — share decks privately, control downloads, hide ads and more …

knockout.jsの紹介(第六回 okayama-js 勉強会)

D8becf939cfb6d977394016667eca429?s=47 Makoto Henmi
November 26, 2016

knockout.jsの紹介(第六回 okayama-js 勉強会)

第六回 okayama-js 勉強会で発表した内容です。
knockout.jsの機能を簡単に紹介して、使うと楽になるところを紹介しました。

デモURL:https://makowis.github.io/okayamajs2016/
デモのソースコード:https://github.com/makowis/okayamajs2016
スライドの写真素材:ぱくたそ https://www.pakutaso.com/

D8becf939cfb6d977394016667eca429?s=128

Makoto Henmi

November 26, 2016
Tweet

Transcript

  1. knockout.js ୈ࿡ճ okayama-js ษڧձ 2016/11/19 ҳݟ ੣(@mako_wis)

  2. ࣗݾ঺հ w ҳݟ੣ ΁ΜΈ·͜ͱ  w 5XJUUFS!NBLP@XJT w גࣜձࣾΫϨΦϑʔΨ w

    ϑϩϯταʔόʔαΠυΤϯδχ ΞɾจষνΣοΫ܎
  3. ࠷ۙ࢖ͬͯΔJSपΓͷٕज़ • TypeScript • ੩తܕ෇͖ݴޠͬΆ͔͚͘Δ • knockout.js • ࠓ೔ͷ࿩

  4. JavaScriptͰ ໘౗͍͘͞ͳͱࢥ͏͜ͱ

  5. ೖྗ஋ʹԠͯ͡දࣔΛม͑Δ

  6. ͦͷଞ͕͋ΔϑΥʔϜ

  7. ࡞Δͷ໘౗͍͘͞Ͱ͢ΑͶʁ

  8. knockout.jsͩͱ

  9. ͦͷଞϑΥʔϜ <label> ɹ<input type="radio" name="area" value="okayama" data-bind="checked: radioSelectedValue”/> Ԭࢁࢢ </label>

    ɾɾɾ <label> ɹ<input type="radio" name="area" value="other" data-bind="checked: radioSelectedValue”/> ɹͦͷଞ </label> <input type="text" data-bind="enable: selectedOther" placeholder="ͦͷଞͷํ͸~"/> function viewModel() { var self = this; self.radioSelectedValue = ko.observable("okayama"); self.selectedOther= ko.computed(function() { return self.radioSelectedValue() == "other"; }); }; ko.applyBindings(new viewModel()); KBWB4DSJQU IUNM
  10. knockout.js ڵຯ෸͍͖ͯ·ͨ͠ΑͶʁ

  11. knockout.jsͱ͸

  12. ओͳಛ௃ ˞೔ຊޠυΩϡϝϯτ͔ΒҾ༻ w ΤϨΨϯτͳґଘτϥοΩϯά w σʔλϞσϧ͕มߋ͞ΕΔ౓ʹɺ6*ͷؔ࿈෇͚ΒΕͨ෦෼Λߋ৽͠·͢ɻ w એݴܕόΠϯσΟϯά w σʔλϞσϧͱ6*Λؔ࿈෇͚ΔɺγϯϓϧͰ໌֬ͳํ๏Ͱ͢ɻෳࡶͳಈత

    6*΋ɺόΠϯσΟϯάɾίϯςΩετΛ֊૚Խͤ͞Δ͜ͱͰ؆୯ʹ࡞੒Ͱ ͖·͢ɻ w ֦ு͕༰қ w ৽ͨͳόΠϯσΟϯάͷ࢓૊ΈΛ࣮૷͢Δ͜ͱ΋ɺ࠷খݶͷίʔυྔͰ ࣮ݱͰ͖·͢ɻ
  13. ͦͷଞͷϝϦοτ ˞೔ຊޠυΩϡϝϯτ͔ΒҾ༻ w ७ਮͳ+BWB4DSJQUϥΠϒϥϦͰ͋Δ w αʔόαΠυ ɹΫϥΠΞϯταΠυͷٕज़Λબͼ·ͤ Μɻ w طଘͷ8FCΞϓϦέʔγϣϯʹ΋౤ೖͰ͖Δ

    w ΞʔΩςΫνϟʹେ͖ͳมߋΛඞཁͱ͠·ͤΜɻ w ϝΠϯετϦʔϜͷϒϥ΢βΛαϙʔτ w  *&Ҏ߱ 'JSFGPYҎ߱ $ISPNF 4BGBSJ౳
  14. ࢖͏ͱָͰ͖Δॴ

  15. ೖྗ஋Λಉظ͍ͨ͠

  16. ೖྗ஋Λಉظ͢Δ <input type="text" data-bind="value: message” />
 <br />
 <span data-bind="text:

    message”></span> function TestappViewModel() { var self = this; 
 self.message = ko.observable("Hello World!!”); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM
  17. σϞ https://makowis.github.io/okayamajs2016/

  18. ΫϦοΫʹରͯ͠Կ͔͍ͨ͠

  19. ΫϦοΫͰΧ΢ϯτΞοϓ <span data-bind="text: numberOfClicks”></span>
 ճΫϦοΫ͠·ͨ͠
 <button data-bind="click: incrementClickCounter” >
 ΫϦοΫ͍ͯͩ͘͠͞

    </button> function TestappViewModel() { var self = this; self.numberOfClicks = ko.observable(0); self.incrementClickCounter = function() {
 var previousCount = self.numberOfClicks();
 self.numberOfClicks(previousCount + 1); }; }; 
 ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM
  20. σϞ https://makowis.github.io/okayamajs2016/

  21. ഑ྻʹೖͬͯΔσʔλΛදࣔ

  22. ഑ྻͷσʔλΛग़ྗ <ul data-bind="foreach: users” >
 <li>
 <span data-bind="text: name”><span/> <span

    data-bind="text: type”><span/> </li> </ul> function TestappViewModel() { var self = this; self.users = ko.observableArray([
 { name: "ଠ࿠", type: "௕உ" },
 { name: "ೋ࿠", type: "࣍உ" },
 { name: "Ֆࢠ", type: "௕ঁ" }
 ]); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM
  23. σϞ https://makowis.github.io/okayamajs2016/

  24. ৄ͍͠৘ใ͸ ೔ຊޠυΩϡϝϯτͰ http://kojs.sukobuto.com/

  25. ࣮ࡍ࢖ͬͯΈͯͲ͏ͳͷʁ

  26. ݸਓతʹ͍͍ͳͱࢥͬͯΔॴ w ը໘पΓͷ੍ޚʹಛԽͯ͠Δ w $44ͷ෇͚ସ͑ɺදࣔ੾Γସָ͕͑ w +BWBTDSJQU༻ͷΫϥεΛ෇͚ͳ͍͍ͯ͘ w 8FCϑϨʔϜϫʔΫͷྖҬͱ݌՞͠ͳ͍

  27. ͥͻ࢖ͬͯΈ͍ͯͩ͘͞

  28. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠