プログラマーな日々

プログラマーをやっています。好きなツール:WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

「第一回 knockoutjsハンズオン」に行ってきた(その4「タイトル未定」by 田中豪さん)

f:id:JHashimoto:20140409044240j:plain

5/17に、「第一回 knockoutjsハンズオン」に行ってきたので、6回に分けて勉強会の内容を紹介します。

初心者向けJavaScript入門からテラ・コーティングまで!JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているknockoutjsを堪能する! : ATND

 

今回は4回目です。4つ目のセッションは、田中豪さんでした(タイトル未定)。

セッション内容

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を使う

リンク

第1回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その1「JavaScript入門」by 坂巻瑞穂さん) - プログラマーな日々

 

第2回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その2「ASP.NETの変遷とKnockout.js」by 日本マイクロソフト松崎剛さん) - プログラマーな日々

 

第3回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その3「プロジェクトにMVVMを適用する狙い」by 河内俊浩さん) - プログラマーな日々

 

第5回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その5「knockoutでグラフを描こう!Viewを極めるMVVM」by 鈴木健太さん) - プログラマーな日々

 

第6回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その6 ハンズオン) - プログラマーな日々

<h