使用CycleJS動態創建元素

Question

我試圖學習一些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;
}

謝謝！

Answer 1

我最終想出了解決方法。 關鍵是我不了解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$
  }));
}