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方法来解决这个非常简单的练习。实际上，我只需要来自流的最新值，然后将其反转（!!值）;

我该如何实现？

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创建一个切换按钮

1 个答案: