タイトルのまま。
xamlでいうと、例えばTextBoxとTextBlockのTextを同期したい。
そんな時は方法は３つあって、
１．KeyUpでTextBlock.TextにTextBox.Text突っ込む。
２．Text同士をControl Bindingする。
３．きちんとVMにプロパティ用意して、Bindingする。
コントロール間とConverterで解決するときは２でいいかなーだけど、３じゃないといけない時とかあるよなぁ。
で、WebでどうするんやろーMVVMってあるんかなーってなって調べてみた。
１と同じ方法だと愚直にChangedイベントとか拾って、JSでDomの中身を書き換えるんだけど、やっぱり美しくない。
２はよくわからん。
で、３を実現するために、Vue.jsっていうライブラリがあるらしい。
Angular.jsよりも気楽に使える軽量シンプルなJSのMVVM用ライブラリらしい。
早速、サンプル試してみることにする。
とりあえずソースべたぁでこんなかんじ。
<html> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript" src="./jquery.js"></script> <script> $(document).ready(function(){ var demo = new Vue({ el: "#demo", data: { message: "てへぺろっ(・ω＜ )☆" } }); } ); </script> <body> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> </body> </html>
xamlでいう{Binding hogehoge}は{{hogehoge}}って記述。
プロパティを編集する側はv-model="hogehoge"らしい。
new VueでVM作って、elにDataContext突っ込むDomを指定するかんじかなー。
data: {
message: "てへぺろっ(・ω＜ )☆"
}ってかいてるけど、messageの中でWebAPIとか叩いてくれば、WebAPIがModelの役割になってくれそう。
取り敢えずまだVとVMだけだけど、いいかんじ。
