2017-04-17 9 views
1

RX Jsを使用してサイドバーメニューを作成しようとしています。ハンバーガーにRXJsストリームを使用してトグル/非表示を切り替えます

var hideStream = Rx.Observable 
.fromEvent(hideButton, 'click') 
.map(() => false); 

var toggleStream = Rx.Observable 
.fromEvent(toggleButton, 'click') 
.map(() => true); 

var resultStream = Rx.Observable.merge(
toggleStream, hideStream) 
.startWith(false) 
.scan(function(value, newValue) { 
    if (newValue) { 
    return !value; 
    } else { 
    return false; 
    } 
}); 

toggleStream観測可能な耳を傾け、ユーザーがメニューの表示を切り替えることができます:これは私がこれまでに得たものです。 2番目に観測されるhideStreamは、現在の状態が何であってもメニューを非表示にできる必要があります。

これは意図したとおりの動作ですが、より良い方法があるかどうかは疑問でした。 hideStreamをマージするとき、私にはかなり大丈夫に見えるhttps://jsbin.com/hozozolune

答えて

0

は、我々はさらに、物事を単純化することができますし、後にtoggleStream:私はscanオペレータにやったことは

は、ここでの例作業...私には少し奇妙な感じtoggleStreamは正しく設定されています:

var hideStream = Rx.Observable 
.fromEvent(hide, 'click') 
.mapTo(false); 

var toggleStream = Rx.Observable 
.fromEvent(toggle, 'click') 
.mapTo(true) 
.startWith(false) 
.scan(value => !value); 

var resultStream = Rx.Observable.merge(toggleStream, hideStream); 
関連する問題