最後のリセットイベントが動作しなくなるまで、ボタンのクリックイベントをドロップします。

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を放出するたびにカウンタをリセットすることができます。