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

使用CycleJS动态创建元素

1 个答案: