Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 28, 2016 22:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/e51d921b0edb4c92edf0fe3122e348c6 to your computer and use it in GitHub Desktop.
Save anonymous/e51d921b0edb4c92edf0fe3122e348c6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/feqote
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://rawgit.com/baconjs/bacon.js/master/dist/Bacon.js"></script>
</head>
<body>
<script id="jsbin-javascript">
// Search helper
const doSearch = (str) => {
return Bacon.fromPromise($.get("https://openclipart.org/search/json/?query="+str))
}
// BaconJS (store)
const searchBus = new Bacon.Bus()
const fullData = Bacon.combineTemplate({
search: searchBus.toProperty(""),
results: []
})
fullData.log()
// create a stream of search results
const resultStream = fullData.flatMapLatest(doSearch).toProperty();
// Event handlers (actions)
const searchChange = (e) => {
searchBus.push(e.target.value)
}
// Function component (view)
const renderResults = (results) =>
React.createElement("div", null, "Sorry, results not implemented for you")
const HelloWorld = (props) =>
(React.createElement("div", null,
React.createElement("h1", null, "Search test"),
React.createElement("input", {type: "text", onChange: searchChange, value: props.search}),
React.createElement("ul", null,
renderResults(props.results)
)
));
// Tie everything in a bow
fullData.onValue((data) => {
ReactDOM.render(React.createElement(HelloWorld, React.__spread({}, data)), document.body);
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Search helper
const doSearch = (str) => {
return Bacon.fromPromise($.get("https://openclipart.org/search/json/?query="+str))
}
// BaconJS (store)
const searchBus = new Bacon.Bus()
const fullData = Bacon.combineTemplate({
search: searchBus.toProperty(""),
results: []
})
fullData.log()
// create a stream of search results
const resultStream = fullData.flatMapLatest(doSearch).toProperty();
// Event handlers (actions)
const searchChange = (e) => {
searchBus.push(e.target.value)
}
// Function component (view)
const renderResults = (results) =>
<div>Sorry, results not implemented for you</div>
const HelloWorld = (props) =>
(<div>
<h1>Search test</h1>
<input type="text" onChange={searchChange} value={props.search} />
<ul>
{renderResults(props.results)}
</ul>
</div>);
// Tie everything in a bow
fullData.onValue((data) => {
ReactDOM.render(<HelloWorld {...data} />, document.body);
})
</script></body>
</html>
Raw
jsbin.feqote.js
// Search helper
const doSearch = (str) => {
return Bacon.fromPromise($.get("https://openclipart.org/search/json/?query="+str))
}
// BaconJS (store)
const searchBus = new Bacon.Bus()
const fullData = Bacon.combineTemplate({
search: searchBus.toProperty(""),
results: []
})
fullData.log()
// create a stream of search results
const resultStream = fullData.flatMapLatest(doSearch).toProperty();
// Event handlers (actions)
const searchChange = (e) => {
searchBus.push(e.target.value)
}
// Function component (view)
const renderResults = (results) =>
React.createElement("div", null, "Sorry, results not implemented for you")
const HelloWorld = (props) =>
(React.createElement("div", null,
React.createElement("h1", null, "Search test"),
React.createElement("input", {type: "text", onChange: searchChange, value: props.search}),
React.createElement("ul", null,
renderResults(props.results)
)
));
// Tie everything in a bow
fullData.onValue((data) => {
ReactDOM.render(React.createElement(HelloWorld, React.__spread({}, data)), document.body);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment