Question

我正在尝试使用RX Js作为练习创建侧边栏菜单。这是我到目前为止所得到的：

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观察者会收听汉堡包，并允许用户切换菜单的可见性。无论当前状态如何，第二个可观察的hideStream必须能够隐藏菜单。

这是按预期工作的，但我想知道是否有更好的方法。我在scan运算符中所做的对我来说有点奇怪......

这里的工作示例：https://jsbin.com/hozozolune

Answer 1

对我来说这很正常，在我们正确设置toggleStream后合并hideStream和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);

使用RXJs流切换和隐藏

1 个答案: