5/17に、「第一回 knockoutjsハンズオン」に行ってきたので、６回に分けて勉強会の内容を紹介します。
初心者向けJavaScript入門からテラ・コーティングまで！JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているknockoutjsを堪能する！ : ATND
今回は４回目です。４つ目のセッションは、田中豪さんでした（タイトル未定）。
セッション内容
Knockoutjsを一言でいうと
- ViewとViewModelを分離してうまいこと値を更新してくれるライブラリ
導入事例
- スマレジ
- ページ全体のデータをViewModelで
- ko.observale
- ko.objservableArray
きっかけ
- プロジェクトの途中から組み込める
- 学習コストが低い
- jQueryでやろうとしたがメンテできないと判断した
- Viewと分離することによりテストが書きやすくなりそう
初心者がはまるところ
- ko.observableの変数を参照すると、functionオブジェクトが返されてしまう
- self.hoge()のように()を付けないと、値を参照できない
- ko.computedの変数宣言時に、引数に渡したfunctionは初回に一度実行される
- 足りない機能は自分でつくったり、プラグインを使用する
ライブコーディング
- View
- spanタグにはtextでバインディングする
- inputタグにはvalueでバインディングする
- Model
- Rowオブジェクトを定義
- ViewModel
- Rowの数だけ行を表示させたいので、self.rows = ko.observableArray([ new Row() ]) のようにobservableArrayを使う
リンク
第１回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その１「JavaScript入門」by 坂巻瑞穂さん） - プログラマーな日々
第２回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その２「ASP.NETの変遷とKnockout.js」by 日本マイクロソフト松崎剛さん） - プログラマーな日々
第３回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その３「プロジェクトにMVVMを適用する狙い」by 河内俊浩さん） - プログラマーな日々
第５回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その５「knockoutでグラフを描こう！Viewを極めるMVVM」by 鈴木健太さん） - プログラマーな日々
第６回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その６ ハンズオン） - プログラマーな日々
<h
