MVVM

View - ViewModel - Modelという構成。ViewModelって何だ！理解して説明する図を描いてみよう！
と思っていたけど最高な図が既に描かれていたので参照。
MVVMフレームワーク vue.js を使ってみた - 水無月の余韻開発Sc.

データの双方向バインディング

html内に{{データ名}}と書いておくと、javascript側で作成するvueオブジェクト内のデータとリンクさせる（＝バインドする）ことができる。

js側でその値を変更するとブラウザ上の要素ツリーにも反映されて表示が変わる。
逆に要素ツリー側でユーザがそのデータを変更（inputタグ中などだとユーザから変更できるので）すると、js側でもその値が変わる。
これが双方向バインディング。

一度対応関係を定めてしまえば、jsのvueオブジェクト中のデータを操作するだけでViewが操作できる。
いちいち要素ツリーを辿って操作する必要はない。

また、html中の要素には「ここをクリックしたらvueオブジェクトのこのメソッドを呼ぶ」といった定義ができる。

View屋さんとViewModel屋さんの間では、
+ この名前のデータにはこのデータを入れるよ
+ この名前のメソッドにはこの機能を持たせるよ
ということだけ取り決めておけばお互いに好きに作れそう。もし別の人が担当するなら、ですが。

そして更に、ViewModelのメソッドから呼び出す関数としてModel層のビジネスロジックは定義される感じ。
実際にViewModel層のデータを書き換えるのはViewModel層のメソッドからのみ。
そういうことですね！

いいじゃんうまく動きそうじゃん。

自分はjQuery プラグインを使ったこと無いのだが、これを使う方針で周りがものを作っている。
なのでVue.jsを調べつつそれにも乗っかる方向。