Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 14, 2017 13:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/b8bfc8a27b3276dc7c16ec6689c2ed0c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/b8bfc8a27b3276dc7c16ec6689c2ed0c to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/vomumoj
Raw
index.html
<script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/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.1/dist/cycle-dom.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-http-driver/v7.0.0/dist/cycle-http-driver.min.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 button = _CycleDOM.button;
var h1 = _CycleDOM.h1;
var h4 = _CycleDOM.h4;
var a = _CycleDOM.a;
var div = _CycleDOM.div;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _CycleHTTPDriver = CycleHTTPDriver;
var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;
// DOM read effect: button clicked
// HTTP write effect: request sent
// HTTP read effect: response received
// DOM write effect: data displayed
function main(sources) {
var clickEvent$ = sources.DOM.select('.get-first').events('click');
var request$ = clickEvent$.map(function () {
console.log('AQUI!!!!');
return {
url: 'http://jsonplaceholder.typicode.com/users/1',
method: 'GET'
};
});
var response$$ = sources.HTTP.filter(function (response$) {
return response$.request.url === 'http://jsonplaceholder.typicode.com/users/1';
});
var response$ = response$$['switch']();
var firstUser$ = response$.map(function (response) {
return response.body;
}).startWith(null);
return {
DOM: firstUser$.map(function (firstUser) {
return div([button('.get-first', 'Get first user'), firstUser === null ? null : div('.user-details', [h1('.user-name', firstUser.name), h4('.user-email', firstUser.email), a('.user-website', { href: firstUser.website }, firstUser.website)])]);
}),
HTTP: request$
};
}
var drivers = {
DOM: makeDOMDriver('#app'),
HTTP: makeHTTPDriver()
};
Cycle.run(main, drivers);
</script>
<script id="jsbin-source-html" type="text/html"><script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"><\/script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/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.1/dist/cycle-dom.js"><\/script>
<script src="https://rawgit.com/cyclejs/cycle-http-driver/v7.0.0/dist/cycle-http-driver.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">const {button, h1, h4, a, div, makeDOMDriver} = CycleDOM;
const {makeHTTPDriver} = CycleHTTPDriver;
// DOM read effect: button clicked
// HTTP write effect: request sent
// HTTP read effect: response received
// DOM write effect: data displayed
function main(sources) {
const clickEvent$ = sources.DOM
.select('.get-first').events('click');
const request$ = clickEvent$.map(() => {
console.log('AQUI!!!!');
return {
url: 'http://jsonplaceholder.typicode.com/users/1',
method: 'GET',
};
});
const response$$ = sources.HTTP
.filter(response$ => response$.request.url ===
'http://jsonplaceholder.typicode.com/users/1');
const response$ = response$$.switch();
const firstUser$ = response$.map(response => response.body)
.startWith(null);
return {
DOM: firstUser$.map(firstUser =>
div([
button('.get-first', 'Get first user'),
firstUser === null ? null : div('.user-details', [
h1('.user-name', firstUser.name),
h4('.user-email', firstUser.email),
a('.user-website', {href: firstUser.website}, firstUser.website)
])
])
),
HTTP: request$,
};
}
const drivers = {
DOM: makeDOMDriver('#app'),
HTTP: makeHTTPDriver(),
}
Cycle.run(main, drivers);
</script></body>
</html>
Raw
jsbin.vomumoj.js
'use strict';
var _CycleDOM = CycleDOM;
var button = _CycleDOM.button;
var h1 = _CycleDOM.h1;
var h4 = _CycleDOM.h4;
var a = _CycleDOM.a;
var div = _CycleDOM.div;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _CycleHTTPDriver = CycleHTTPDriver;
var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;
// DOM read effect: button clicked
// HTTP write effect: request sent
// HTTP read effect: response received
// DOM write effect: data displayed
function main(sources) {
var clickEvent$ = sources.DOM.select('.get-first').events('click');
var request$ = clickEvent$.map(function () {
console.log('AQUI!!!!');
return {
url: 'http://jsonplaceholder.typicode.com/users/1',
method: 'GET'
};
});
var response$$ = sources.HTTP.filter(function (response$) {
return response$.request.url === 'http://jsonplaceholder.typicode.com/users/1';
});
var response$ = response$$['switch']();
var firstUser$ = response$.map(function (response) {
return response.body;
}).startWith(null);
return {
DOM: firstUser$.map(function (firstUser) {
return div([button('.get-first', 'Get first user'), firstUser === null ? null : div('.user-details', [h1('.user-name', firstUser.name), h4('.user-email', firstUser.email), a('.user-website', { href: firstUser.website }, firstUser.website)])]);
}),
HTTP: request$
};
}
var drivers = {
DOM: makeDOMDriver('#app'),
HTTP: makeHTTPDriver()
};
Cycle.run(main, drivers);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment