WebRxは、RxJSでDOM操作ができるというMVVMライブラリで、ViewModelにおいてViewとbindするために使うwx.propertyというプロパティはDOM操作以外の使い方もできるということを紹介しようと思う。
wx.propertyの使い方
wx.property
メソッドは引数に渡された値を初期値とするプロパティを生成して返すメソッドだ。
var hoge = wx.property('hoge');
// プロパティを読み取る
console.log(hoge());
// プロパティを変更する
hoge('fuga');
ここまでは特にViewModelで使うぐらいしか意味の無いものだ。ViewModel以外で使うにはアクセスの面倒さやコストを考えるとただの無駄でしかない。
changed
プロパティの強みを決定づけるのがchangedである。
hoge.changed.subscribe(function(s){
console.log('changed: ' + s);
});
hoge('fuga');
プロパティに新しい値が入るたびにストリームには新しい値が流れることになる。もちろんこのストリームはRxJSの様々なオペレータを使うことができる。
wx.whenAny
wx.whenAny
はプロパティの変更を受けて再計算されるプロパティを定義できる。
var piyo = wx.whenAny(hoge, function(hoge) {
return 'hoge is ' + hoge;
}).toProperty();
piyo.changed.subscribe(function(s){
console.log(s);
});
hoge('ほげい');
// hoge is ほげい
wx.list
wx.list
は、Observableなリストを生成する。
list = wx.list();
list.listChanged.subscribe(function(list){
console.dir(list);
});
list.push('hoge');
// ['hoge']
list.push('fuga');
// ['hoge','fuga']
console.log(list.get(1));
// 'fuga'
まとめ
実のところ、wx.property
も wx.list
もさほど使い勝手がいいわけでもないが、RxJS単体とはまた違ったリアクティブプログラミングが楽しめるので、RxJS使いの人は是非とも WebRx に触れてみてほしい。