読者です 読者をやめる 読者になる 読者になる

atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

WebでもBindingしたい!Vue.jsを使ってMVVMしてみる。

タイトルのまま。

xamlでいうと、例えばTextBoxとTextBlockのTextを同期したい。
そんな時は方法は3つあって、
1.KeyUpでTextBlock.TextにTextBox.Text突っ込む。
2.Text同士をControl Bindingする。
3.きちんとVMにプロパティ用意して、Bindingする。

コントロール間とConverterで解決するときは2でいいかなーだけど、3じゃないといけない時とかあるよなぁ。

で、WebでどうするんやろーMVVMってあるんかなーってなって調べてみた。
1と同じ方法だと愚直にChangedイベントとか拾って、JSでDomの中身を書き換えるんだけど、やっぱり美しくない。
2はよくわからん。
で、3を実現するために、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>

f:id:c-mitsuba:20140316185841p:plain

xamlでいう{Binding hogehoge}は{{hogehoge}}って記述。
プロパティを編集する側はv-model="hogehoge"らしい。

new VueでVM作って、elにDataContext突っ込むDomを指定するかんじかなー。

data: {
	message: "てへぺろっ(・ω< )☆"
}

ってかいてるけど、messageの中でWebAPIとか叩いてくれば、WebAPIがModelの役割になってくれそう。

取り敢えずまだVとVMだけだけど、いいかんじ。