1

cyclejs とリアクティブ プログラミングを学習しようとしていますが、イベントを値で管理する方法がわかりません。

たとえば、次のような数学演算を行う 4 つの関数を作成する必要があります。

  • 添加
  • 引き算
  • 分割
  • 乗算

これが私が持っているコードです:

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;

今から、コードが何をすべきかを念頭に置いて、操作をクリックするたびにマッピングし、2 つの input$ をフラットにして、ボタンをクリックしたときにのみ結果を取得します。

実際のところ、結果の値はクリックではなく入力で変化します。さらに重要なことは、追加ボタンを最初にクリックした後にのみ、入力時に変更されることです。

今回は何が間違っていますか？

返信ありがとうございます

4

1 に答える 1