knockout.jsとMVVM

公開:2014-06-18 21:14
更新:2020-02-15 04:37
カテゴリ:javascript,knockout.js

knockout.jsを使用するにあたりMVVMというものをきちんと勉強しておかなくては思ったが、意外に難しいものであった。

普通のアプリだとViewを表示するためだけの情報は必要だったりするし、それを保持するものが必要になる。あるコンテナに応じてUIの状態フラグを作りだしたり、表示座標をModelデータから演算したりとか、それを保持したりとか。1つのModelデータを複数の異なるViewで表示する場合はViewに関する情報をModelにすべて持たせるとModelが複雑になってしまうから、それをViewごとにViewModelとして保持したほうがModelがすっきりするだろうね。ViewModelを複数のViewで共有といったことをすれば簡素化も可能かもしれない。こんな理解でいいのかな。。

knockout.jsはViewとViewModelの部分のフレームワークであり、雰囲気はXAMLデータバインディングのそれだ。まあXAMLもちょっとは齧っているのでとっつきやすいかも。 HTMLエレメントにバインディングをマークアップするだけでViewModelと連携できる。連携するためのJavaScriptコードはほぼ書かなくてもよい。ただViewModelとModel間のサポートはないので自前で実装しなくてはならないようであるが。ただknockout.jsを使うとViewの変更を自動的にViewModelに反映するのでUndo/Redo機能の実装は面倒そうかな?と思ったけれども単純にModelに対してUndo/RedoすればそれをViewModelに反映するようにしとけばViewも連携すると思うので、knockout.jsのViewModelをカスタマイズしなくてもよさそうに思う。