viewof Todos = { let view = html`

RxJS Todos:

` const render = list => { view.querySelector('dl').innerHTML = ` ${list.reduce((items, {id, text}) => ` ${items}

${text}

`, '')} ` } const create = () => TodosStore.actions.create({ text: view.querySelector('[add-item-value]').value, id: Math.floor(Math.random(0,10) * 100).toString() }) const update = item_id => TodosStore.actions.delete({ id: item_id }) const remove = ({target: edited_node}) => TodosStore.actions.update({ id: edited_node.parentNode.dataset.itemId, text: edited_node.textContent }) Rx.Observable.fromEvent(view, 'keyup') .filter(e => e.keyCode == 13) .filter(e => e.target.hasAttribute('add-item-value')) .subscribe(hit_enter => create()) Rx.Observable.fromEvent(view, 'click') .filter(e => e.target.hasAttribute('add-item')) .subscribe(create) Rx.Observable.fromEvent(view, 'click') .filter(e => e.target.hasAttribute('remove-item')) .do(e => e.target.nextElementSibling.style.textDecoration = 'line-through') .map(e => e.target.parentNode.dataset.itemId) .delay(1000) .subscribe(update) Rx.Observable.fromEvent(view, 'keyup') .debounce(() => Rx.Observable.interval(1000)) .filter(e => e.target.hasAttribute('update-item')) .distinct(e => e.target.textContent) .subscribe(remove) TodosStore.store$.subscribe(list => { render(list) view.querySelector('[add-item-value]').value = '' }) return view }