const xs = xstream.default;

const {div, span, input, label, makeDOMDriver} = CycleDOM; 

​

function List(sources) {

​

  const props = [

    {text: 'Hi'},

    {text: 'My'},

    {text: 'Ho'}

  ];

​

  var items = props.map(x => isolate(ListItem)({Props: xs.of(x), DOM: sources.DOM}).DOM);

​

  const vdom$ = xs.combine.apply(null, items)

    .map(x => div('.list', x));

​

  return {

    DOM: vdom$

  };

}

​

function ListItem(sources) {

  const domSource = sources.DOM;

  const props$ = sources.Props;

​

  const newValue$ = domSource

    .select('.checker')

    .events('change')

    .map(ev => ev.target.checked);

​

  const state$ = props$

    .map(props => newValue$

      .map(val => ({

        text: props.text, 

        checked: val

      }))

      .startWith(props)

    )

    .flatten();

​

  const vdom$ = state$

    .map(state => div('.list-item', [

      input('.checker', {

        attrs: {type: 'checkbox', id: state.text}

      }),

      label({attrs: {for: state.text}}, state.text),

      ' - ',

      span(state.checked? 'ON': 'off')

    ])

  );

​

  return {

    DOM: vdom$

};

}

​

Cycle.run(List, {

  DOM: makeDOMDriver('#app')

});

​