双方向バインディングする
今年初投稿。
家が燃えてたので忙しくて……その話はまた別途。
(※ソース修正)
MVVMではお馴染みの双方向バインディングですが、
AngularとかVueとか使わずに適当にやる感じです。
jQuery使ってますが使わなくてもできます。
こんな感じです。
HTMLいじってるだけだと、ただ単にフォームのvalue取ってきてHTML書き換えてるだけに見えますが、
内部の変数とちゃんと同期してます。
data-ib-containerで指定した値をキーとしてJS１行目containersに入って、
その中にdata-ib-modelで指定した値をキーとして連想配列の要素が追加されていく感じです。
この要素１つ１つがフォームパーツに対応していて、
フォームの値が変わっても、変数の値が変わっても瞬時にどちらも同じ値になるようになっています。
この値はdata-ib-modelを指定したHTML要素に勝手に入るようになっています。
Mustache構文には非対応です。めんどくさかった。
(基本的にHTMLソース内にうだうだ書くのが好きじゃないので。)
ま～このままだとテンプレートエンジン何か使わない限り使い道ほとんどないですが、
（そして大体その場合こんなことしなくても実装されている）
双方向バインディングだけ使ってテンプレートは要らんって場合が万一あったら、一応やってやれないことはない的な感じで。
これでもtextareaとか、data-ib-modelが指定されているタグがフォームだった場合などは考慮してないのでご注意を。
※ちょっとさすがに適当すぎたので一部修正しました。
