0

私はいくつかの CycleJS を学ぼうとしていますが、これを正確にどうすればよいかわかりませんでした。目標は、手動で宣言するのではなく、構成を介して入力を作成することです。問題は、両方ではなく、配列からの最後の入力のみがレンダリングされることです。エラーがview$にあり、ストリームをどのように扱っているかを想定しています。私の単純な実装は次のとおりです。

Main.js

const sliderGunProps$ = xs.of({
  value: 30,
  id: 'gun'
});

const sliderCannonProps$ = xs.of({
  value: 70,
  id: 'cannon'
});

const propsConfig = [sliderGunProps$, sliderCannonProps$];

function view$(state$) {
  return xs.fromArray(state$)
    .map(state => {
      return xs.combine(state.sliderVDom$, state.values)
        .map(([sliderVDom, value]) =>
          div([sliderVDom, h1(value)])
      );
    })
    .flatten();
}

function model(actions$) {
  return actions$.map((action) => {
    const sliderVDom$ = action.DOM;
    const sliderValue$ = action.value;

    const values$ = sliderValue$.map(val => val);

    return {
      sliderVDom$: sliderVDom$,
      values: values$
    };
  });
}

function intent(sources) {
  return propsConfig.map(prop$ => Slider({
    DOM: sources.DOM,
    props$: prop$
  }));
}

function main(sources) {
  const actions$ = intent(sources);

  const state$ = model(actions$);

  const vdom$ = view$(state$);

  const sink = {
    DOM: vdom$
  };

  return sink;
}

ありがとう！

4

1 に答える 1

0

私はそれを解決する方法を考え出しました。ポイントは、view$ がストリームを処理する方法を理解していなかったということです。適切なコード:

function total(values) {
  return xs.combine(...values)
    .map(val => val.reduce((acc, x) => acc + x));
}

function view$(state$) {
  const DOMElements = state$.map(slider => slider.sliderVDom$);
  const values = state$.map(slider => slider.values);
  const totalValue$ = total(values);

  return xs.combine(totalValue$, ...DOMElements)
    .map(([totalValue, ...elements]) => (
      div([
        ...elements,
        h1(totalValue)
      ])
    ));
}

function model(actions$) {
  return actions$.map((action) => ({
    sliderVDom$: action.DOM,
    values: action.value.map(val => val)
  }));
}

function intent(sources) {
  return propsConfig.map(prop$ => Slider({
    DOM: sources.DOM,
    props$: prop$
  }));
}
于 2016-09-12T19:38:23.657 に答える