Cyclejs和觸發事件與價值

Question

我試圖學習cyclejs和反應式編程，我不知道如何管理事件的值。

例如，我需要創建四個功能，使一些數學運算，例如：

• 此外
• 減法
• divison
• 乘法

這裏的代碼，我有：

function main ({DOM}) { 

    const secondNumber$ = DOM 
    .select('.second-number') 
    .events('change') 
    .map(ev => ev.target.value) 
    .startWith(0) 

    const firstNumber$ = DOM 
    .select('.first-number') 
    .events('change') 
    .map(ev => ev.target.value) 
    .startWith(0) 

    const addClick$ = DOM 
    .select('.add') 
    .events('click') 
    .merge(firstNumber$) 
    .merge(secondNumber$) 
    .filter(value => console.log(value)) 
    .scan((nb1, nb2) => nb1 + nb2) 


    return { 
    DOM: addClick$.map(result => 
     div([ 
     input('.first-number',{type:'text'}), 
     input('.second-number',{type:'text'}), 
     button('.add', 'Add'), 
     h2('Result is : ' + result) 
     ]) 
    ) 
    }; 
} 

它根本不起作用，我不知道我在那裏做錯了什麼。

我在尋找一個簡單的解釋我該如何使這工作？我覺得就像secondNumber $和firstNumber $的合併流是不正確的，我找不到原因..

任何想法？

編輯：我得到了，我不應該使用我正在使用的運算符，但使用withLatestFrom。

事實是，我米使用XStream的，所以我要地圖/扁平化：

import { 
    div, 
    h1, 
    input, 
    button 
} from '@cycle/dom'; 

/** 
* Counter 
* @param {Object} sources Contains the inputs 
* @return {Object} The output sinks 
*/ 
function counter(sources) { 

    const input1$ = sources.DOM 
     .select('.input1') 
     .events('input') 
     .map(ev => ev.target.value) 
     .startWith(0); 

    const input2$ = sources.DOM 
     .select('.input2') 
     .events('input') 
     .map(ev => ev.target.value) 
     .startWith(0); 

    const add$ = sources.DOM 
     .select('.add') 
     .events('click'); 

    const resultAddition$ = add$ 
     .map(ev => input1$ 
      .map(value => input2$ 
       .map(value2 => Number(value) + Number(value2))) 
      .flatten()) 
     .flatten() 
     .startWith(0); 

    return { 
     DOM: resultAddition$.map(item => { 
      console.log(item); // triggered each time an input is modified 
      return div([ 
       h1(`Super new value : ${item}`), 
       input('.input1', { 
        attrs: { 
         type: 'text' 
        } 
       }), 
       input('.input2', { 
        attrs: { 
         type: 'text' 
        } 
       }), 
       button('.add', 'Ajouter') 
      ]); 
     }) 
    }; 
} 

export default counter; 

從現在開始，我有一點什麼的代碼應該做的，映射在每一次點擊操作和壓平兩個輸入$得到我的結果只有當點擊按鈕

事實是，結果值是改變的輸入，而不是點擊。更重要的是，它僅在第一次點擊上的添加按鈕後，在輸入上發生變化，這不是我想要的。

這次我做錯了什麼？

感謝您的答覆