31:[] 2f:{"title":"Views are Mutable Values","cells":[{"id":88,"value":"md`# Views are Mutable Values\n\n

***Update Feb. 2021:*** *Observable now supports [**synchronized inputs**](/@observablehq/synchronized-inputs)! This notebook will remain for history, but please upgrade to [Observable Inputs](/@observablehq/inputs).*

\n\n[A view](/@mbostock/introduction-to-views) conveniently defines an interactive value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"viewof x = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"x","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`While interactive values are often controlled only by interaction, sometimes you also want programmatic control. You can do this by assigning to the view’s value and then dispatching an *input* event to notify the [associated generator](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#Generators_input). Try clicking the play button in the cell below to set *x* to a random value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"{\n viewof x.value = Math.random() * 100;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`You can also animate a view’s value:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"{\n for (let i = 1; i <= 50; ++i) {\n viewof x.value = i;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n yield;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"x // The same x as above (and below)!","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`And here are some buttons that modify ${tex`x`} by adding or subtracting:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"{\n const form = html``;\n form.inc.onclick = () => {\n ++viewof x.value;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.dec.onclick = () => {\n --viewof x.value;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n };\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`And we can use it to [synchronize views](/@mbostock/synchronized-views):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"{\n const input = html``;\n input.oninput = () => {\n viewof x.value = input.valueAsNumber;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n };\n const update = () => input.value = viewof x.value;\n viewof x.addEventListener(\"input\", update);\n invalidation.then(() => viewof x.removeEventListener(\"input\", update));\n return update(), input;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"x // The same x as above (and below)!","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}