Créer un bouton à bascule avec RxJS

Question

Je suis assez nouveau pour le concept de programmation réactive, et je ne fais que jouer un peu. Pour mettre en pratique ce que j'ai appris, j'ai décidé d'écrire du code en utilisant RxJS dans un projet réel et tout va bien.

Maintenant, je veux créer un simple bouton à bascule:

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 
}) 

Je ne peux pas obtenir ma tête autour de cet exercice très simple sans utiliser des méthodes DOM dans mon flux. En fait, j'ai juste besoin de la dernière valeur du flux, puis je l'inverse (valeur !!);

Comment puis-je l'implémenter?

Answer 1

Est-ce que votre bouton ne porte l'état que via le DOM? Dans ce cas, il sera impossible de récupérer cet état sans interroger le DOM.

Vous pouvez envisager d'avoir votre état hors du DOM et de le manipuler sans les fonctions DOM. Cela dit, vous aurez à un moment donné à mettre à jour l'état DOM, mais que vous pouvez faire hors du flux dans l'observateur.

Quelque chose comme ceci:

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 
}) 

La documentation pertinente:

• scan
• startWith