Skip to content

Instantly share code, notes, and snippets.

Created May 15, 2016 23:27
Show Gist options
  • Save anonymous/dd55d05005afeb066cff7a4a1591ee62 to your computer and use it in GitHub Desktop.
Save anonymous/dd55d05005afeb066cff7a4a1591ee62 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/dowura
<!DOCTYPE html>
<html>
<head>
<script src="https://static.jsbin.com/js/vendor/traceur.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-core/v6.0.0/dist/cycle.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-dom/v9.0.2/dist/cycle-dom.js"></script>
<script src="https://rawgit.com/cyclejs/isolate/v1.1.1/dist/cycle-isolate.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
<script id="jsbin-javascript">
'use strict';
var _CycleDOM = CycleDOM;
var div = _CycleDOM.div;
var h = _CycleDOM.h;
var p = _CycleDOM.p;
var button = _CycleDOM.button;
var ul = _CycleDOM.ul;
var li = _CycleDOM.li;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _Rx = Rx;
var Observable = _Rx.Observable;
var isolate = CycleIsolate;
function OriginalInput(sources) {
var input$ = sources.DOM.events('input').map(function (ev) {
return ev.target.value;
});
var vtree$ = sources.Assign.merge(input$).startWith(null).map(function (value) {
return h('input', {
type: 'text',
value: value
});
});
return {
DOM: vtree$,
Values: input$
};
}
var Input = function Input(s) {
return isolate(OriginalInput)(s);
};
function main(sources) {
var add$ = sources.DOM.select('.add').events('click').map(null);
var input = Input({
Assign: add$.map(function () {
return '';
}),
DOM: sources.DOM
});
var list$ = input.Values.flatMapLatest(function (text) {
return add$.first().map(text);
}).startWith([]).scan(function (acc, curr) {
return acc.concat(curr);
});
var vtree$ = list$.combineLatest(input.DOM, function (list, inputDOM) {
return div([inputDOM, button('.add', 'Add'), ul(list.map(function (item) {
return li(item);
}))]);
});
return {
DOM: vtree$
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#app')
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">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')
});</script></body>
</html>
'use strict';
var _CycleDOM = CycleDOM;
var div = _CycleDOM.div;
var h = _CycleDOM.h;
var p = _CycleDOM.p;
var button = _CycleDOM.button;
var ul = _CycleDOM.ul;
var li = _CycleDOM.li;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _Rx = Rx;
var Observable = _Rx.Observable;
var isolate = CycleIsolate;
function OriginalInput(sources) {
var input$ = sources.DOM.events('input').map(function (ev) {
return ev.target.value;
});
var vtree$ = sources.Assign.merge(input$).startWith(null).map(function (value) {
return h('input', {
type: 'text',
value: value
});
});
return {
DOM: vtree$,
Values: input$
};
}
var Input = function Input(s) {
return isolate(OriginalInput)(s);
};
function main(sources) {
var add$ = sources.DOM.select('.add').events('click').map(null);
var input = Input({
Assign: add$.map(function () {
return '';
}),
DOM: sources.DOM
});
var list$ = input.Values.flatMapLatest(function (text) {
return add$.first().map(text);
}).startWith([]).scan(function (acc, curr) {
return acc.concat(curr);
});
var vtree$ = list$.combineLatest(input.DOM, function (list, inputDOM) {
return div([inputDOM, button('.add', 'Add'), ul(list.map(function (item) {
return li(item);
}))]);
});
return {
DOM: vtree$
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#app')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment