用RxJS创建一个切换按钮

Question

我对响应式编程的概念还很陌生，只是在玩一些。为了实践我所学的知识，我决定在一个真实的项目中使用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
})

相关文件：

• 扫描
• 从...开始