刪除按鈕點擊事件，直到上次重置事件不起作用

Question

使用cycle.js和xstream，我想計算按鈕點擊並重置它們。

我打算通過計算上次重置後的所有按鈕點擊來實現此目的。要做到這一點，我想到了放棄所有按鈕點擊直到最後一次重置，並計算剩下的部分。

但是，我留下了2個不起作用的按鈕

有什麼建議嗎？

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) 

這應該做的伎倆。然後，您可以對button2Click執行相同的操作。

通過合併button1click$和resetClick$，我們得到一個流，即發出0或1。並且使用摺疊，我們可以在每次合併流發出0時重置計數器。