Create elements dynamically with CycleJS

Question

I'm trying to learn some CycleJS and I ended up not knowing what to do exactly with this. The goal is to create inputs via configuration, instead of declaring them manually. The problem is I'm only getting rendered the last of the inputs from the array, instead of both. I'm assume the error is in view$ and how I'm dealing with the stream.My naive implementation is this:

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

Thanks!

Welcome to SO. Its a little unclear what the problem actually is. I suspect with some careful cutting you could make the example code shorter, while still showing the same problem. — James K, Sep 11 '16 at 13:31

score 0 · Accepted Answer · answered Sep 12 '16 at 19:38

I ended up figuring out how to solve it. The point was that I was not understanding how view$ handle the streams. The proper code:

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

Create elements dynamically with CycleJS

1 Answers1