knockout.jsをゆるめに触ってみた。

knockout.jsをゆるめに触ってみた。

ども。
来週の花見に向け、祈祷師モードこと
P山です。

WEB+DBPress 85の速習リアクティブプログラミングを読んで、
面白そうだったのでknockout.js触ってみました。

MVVMでの実装を今までやったことがなく、最初すっと入ってくるわけではなかったです。
僕なりの理解は、

・Model = APIと話したりする描画と関係ない処理を定義する
・ViewModel = Viewにバインドするデータの管理を行う
・View = ViewModelとバインドしたデータのレンダリングを行う

と言った感じになりました。

肝心のKnockout.jsは日本語のドキュメントもあり、
ちょっとググると情報が出てくるので、触りやすい状態にはなっているようです。

js読み込んで、htmlにバインディングするコード(observable)を埋め込んで、
後はViewModelで該当の変数に値を入れるなり、
もしくはViewに埋め込んだ変数からの入力を受けて、
処理を行うなりといった感じでザクザク書けました。

ただ黙々と読んでも覚えないので、Knockout.jsのサンプルコードをベースに、
種別と、割引率を追加、削除するようなサンプルを書いてます。
(Modelに該当する部分は皆無です)

スクリーンショット 2015-03-29 19.28.52

コードの実装はこのへんで動きを見つつ確認できます。
(JSFIDDLE便利!)

あとは、、、
こっそりサービスに突っ込みたい。

乙ぽよでした。

facebook
Twitter
コメントは受け付けていません。
Social Share Buttons and Icons powered by Ultimatelysocial