Published
Edited
Feb 12, 2019
Insert cell
Insert cell
Insert cell
Insert cell
// The subscribe function that will listen to the observable button clicks
subscribe = function(){
Rx.Observable.fromEvent(document.getElementById("button"), 'click')
.scan( click => click + 1, 0)
.subscribe( click => {
var result = document.getElementById("result")
result.value = click + " clicked\n" + result.value;
})
}

Insert cell
html`
<h2>Demo</h2>
<style> table { width: 300px; background-color: #dedede; } td { text-align: center; padding: 5px; } </style>
<table>
<tr>
<td>
<button id='button'>🔥 Fire</button>
<button id="subscribe">👂🏽 Subscribe</button>
<button id="reset">💣 Clear</button>
</td>
</tr>
<tr>
<td><textarea id="result" cols=30 rows=10>Results\n</textarea></td>
</tr>
</table>`
Insert cell
{
// The subscribe button
Rx.Observable.fromEvent(document.getElementById("subscribe"), 'click')
.subscribe( () => subscribe());
// The reset button
Rx.Observable.fromEvent(document.getElementById("reset"), 'click')
.subscribe( () => {
document.getElementById("button").value = "";
document.getElementById("result").value = "";
})
return md`The subscribe and reset buttons`
}
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more