here to learn
Published unlisted
Edited
Jul 5, 2021
2 stars
viewof trigger = {
const element = html`<div id="trigger" style="display:none;">`;
element.value = true;
return element;
}
data = {
trigger; // this creates a dependence on the `trigger` element;
// add a reference like this early on in your notebook's cell hierarchy
// and everything downstream will refresh when you send an "input" event to "trigger"
yield { text: "Waiting", color: "yellow" };
await Promises.delay(2000);
yield { text: "Done", color: "green" };
}
{
// this cell depends on "data", and thus has a transitive dependence on "trigger"
return html`<div style="color:${data.color};font-size:2em">${data.text}`;
}
{
const el = html`<button>click to send an "input" event to the "trigger" element`;
el.onclick = () => {
const triggerElement = document.getElementById("trigger");
// Inside a notebook you would ordinarily avoid selecting elements like this and just refer to the `trigger` cell directly,
// but since you want to do something outside the notebook context you'll have to do something like this.
triggerElement.dispatchEvent(new Event("input"));
};
return el;
}
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.
