Skip to content

Instantly share code, notes, and snippets.

@Hypnosphi
Forked from anonymous/index.html
Last active May 15, 2016 23:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hypnosphi/f233a501d08707a759fdc0ec8debe95a to your computer and use it in GitHub Desktop.
Save Hypnosphi/f233a501d08707a759fdc0ec8debe95a to your computer and use it in GitHub Desktop.
const {div, h, p, button, ul, li, makeDOMDriver} = CycleDOM;
const {Observable} = Rx;
const isolate = CycleIsolate;
function OriginalInput(sources) {
const input$ = sources.DOM
.events('input')
.map(ev => ev.target.value);
const vtree$ = sources.Assign
.merge(input$)
.startWith(null)
.map(value =>
h('input', {
type: 'text',
value
})
);
return {
DOM: vtree$,
Values: input$
};
}
const Input = s => isolate(OriginalInput)(s);
function main(sources) {
const add$ = sources.DOM.select('.add')
.events('click').map(null);
const input = Input({
Assign: add$.map(() => ''),
DOM: sources.DOM
});
const list$ = input.Values.flatMapLatest(text => add$.first().map(text))
.startWith([])
.scan((acc, curr) => acc.concat(curr));
const vtree$ = list$.combineLatest(input.DOM,
(list, inputDOM) =>
div([
inputDOM,
button('.add', 'Add'),
ul(list.map(item => li(item)))
])
);
return {
DOM: vtree$,
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#app')
});
@Hypnosphi
Copy link
Author

This is modification of A.Stalz's controlled input example (blog post , JSBin).

Instead of using virtual-dom hooks, I merge assign and DOM input sources into a value attribute stream.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment