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

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

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/

Makoto Henmi

November 26, 2016
Tweet

More Decks by Makoto Henmi

Other Decks in Programming

Transcript

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

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

    w ΞʔΩςΫνϟʹେ͖ͳมߋΛඞཁͱ͠·ͤΜɻ w ϝΠϯετϦʔϜͷϒϥ΢βΛαϙʔτ w  *&Ҏ߱ 'JSFGPYҎ߱ $ISPNF 4BGBSJ౳
  4. ೖྗ஋Λಉظ͢Δ <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
  5. ΫϦοΫͰΧ΢ϯτΞοϓ <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
  6. ഑ྻͷσʔλΛग़ྗ <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