31:[] 2f:{"title":"Views are Mutable Values","cells":[{"id":88,"value":"md`# Views are Mutable Values\n\n[A view](/@mbostock/introduction-to-views) conveniently defines an interactive value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"ordinary_viewof = md`## simple viewof + slider`","pinned":true,"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":"programmatic_random_control = 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\"));// without it x won't be updating\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"generator_control= md`You can also animate a view’s value:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"x","pinned":true,"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":56,"value":"button_control = md`## Add buttons that modify ${tex`x`} by adding or subtracting:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"x // The same x as above (and below)!","pinned":true,"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":"another_view_control = md`## [synchronize views](/@mbostock/synchronized-views) to change x and slider above`","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"},{"id":462,"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"}],"files":"$W31","stdlib":"1","titling":"auto"}