Suppression d'un clic sur un bouton jusqu'à ce que l'événement de dernière réinitialisation ne fonctionne pas

Question

En utilisant cycle.js et xstream, je voudrais compter les clics sur les boutons et les réinitialiser.

Je prévoyais d'y parvenir en comptant tous les clics sur les boutons après la dernière réinitialisation. Pour ce faire, j'ai pensé à supprimer tous les clics sur les boutons jusqu'à la dernière réinitialisation, et compter ce qui reste.

Cependant, je suis parti avec 2 boutons qui ne fonctionnent pas

Un conseil?

function main(sources: ISources): ISinks { 
    const dom = sources.dom; 
    const resetClick$ = dom.select("#resetButton") 
    .events("click") 
    .map(ev => 0) 
    .startWith(0) 

    const button1Click$ = dom.select("#button1") 
    .events("click") 
    .compose(dropUntil(resetClick$.last())) 
    .map(ev => 1) 
    .fold((acc, n) => acc + n, 0) 
    .startWith(0) 

    const button2Click$ = dom.select("#button2") 
    .events("click") 
    .compose(dropUntil(resetClick$.last())) 
    .map(ev => 1) 
    .fold((acc, n) => acc + n, 0) 
    .startWith(0) 

    const vtree$ = Stream.combine(button1Click$, button2Click$) 
    .map(n => 
     div([ 
     input("#button1", { attrs: { type: "button", value: "Click Me!"}}), 
     input("#button2", { attrs: { type: "button", value: "Click Me!"}}), 
     input("#resetButton", { attrs: { type: "button", value: "Reset!"}}), 
     p(["Clicks: " + n[0] + " + " + n[1]]), 
     p(["Click total: " + (n[0] + n[1])]) 
     ]) 
    ) 

    const sinks: ISinks = { 
    dom: vtree$ 
    }; 
    return sinks; 
} 

Answer 1

const resetClick$ = dom.select("#resetButton") 
    .events("click") 
    .map(ev => 0) 

const button1Click$ = dom.select("#button2") 
    .events("click") 
    .map(ev => 1) 

const button1WithReset$ = Stream.merge(button1Click, resetClick$) 
    .fold((acc, n) => { 
     if (n == 0) return 0 
     else return acc + n 
    }, 0) 

Cela devrait faire l'affaire. Vous pouvez ensuite faire la même chose pour button2Click. En fusionnant button1click$ et resetClick$, nous obtenons un flux qui émet soit 0 soit 1. Et en utilisant fold, nous pouvons réinitialiser le compteur chaque fois que notre flux fusionné émet 0.