使用 CycleJS 动态创建元素

Question

我正在尝试学习一些 CycleJS，但我最终不知道该怎么做。目标是通过配置创建输入，而不是手动声明它们。问题是我只渲染了数组中的最后一个输入，而不是两者。我假设错误在 view$ 中，我如何处理 stream.My 天真的实现是这样的：

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$
  }));
}

使用 CycleJS 动态创建元素

Create elements dynamically with CycleJS

javascript

cyclejs