LoginSignup
11

More than 5 years have passed since last update.

WebRxのwx.propertyを使った本当のリアクティブプログラミング

Last updated at Posted at 2015-08-24

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.propertywx.list もさほど使い勝手がいいわけでもないが、RxJS単体とはまた違ったリアクティブプログラミングが楽しめるので、RxJS使いの人は是非とも WebRx に触れてみてほしい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11