使用 RxJS 创建一个切换按钮

Question

我对 Reactive Programming 的概念还很陌生，我只是在玩弄一下。为了实践我所学的知识，我决定在实际项目中使用 RxJS 编写一些代码，并且一切进展顺利。

现在我想创建一个简单的切换按钮：

let btn = $('button')[0]
let clicks = Rx.Observable.fromEvent(btn, 'click')
               .map(function(clickEvent) {
                  // decide to return true/false
               })

clicks.subscribe(value => {
    // value is true or false
})

如果不在流中使用 DOM 方法，我就无法理解这个非常简单的练习。实际上，我只需要流中的最新值，然后将其反转 (!!value);

我该如何实现？

Answer 1

您的按钮是否仅通过 DOM 携带状态？在那种情况下，如果不查询 DOM 就不可能检索到该状态。

您可以考虑让您的状态脱离 DOM 并在没有 DOM 函数的情况下对其进行操作。也就是说，您有时需要更新 DOM 状态，但您可以在观察者的流之外进行更新。

像这样：

var button_initial_state = false; // false for unchecked

var button_state$ = Rx.Observable.fromEvent(btn, 'click')
                                 .scan (function(current_state, event){
                                    return !current_state;
                                  }, button_initial_state)
                                 .startWith(button_initial_state);

button_state$.subscribe (function (state){
  // Code to set the button state in the DOM
})

使用 RxJS 创建一个切换按钮

Create a toggle button with RxJS

javascript

reactive-programming

togglebutton

rxjs