2e:null 2f:["$","title",null,{"children":"Mutating Views | Mike Bostock | Observable"}] 34:[] 32:{"id":"277607619be2ee05","slug":"mutating-views","title":"Mutating Views","thumbnail":"1453e1ea5c4a15b0210cbfeba86afe5f3ffaa5f7e195f626eb3165abad9e506c","access_level":"public","create_time":"$D2018-03-26T22:14:53.822Z","update_time":"$D2021-02-04T15:17:14.745Z","view_time":null,"first_public_time":"$D2018-03-26T22:27:35.714Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":53,"publish_version":53,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Mutating Views","cells":[{"id":0,"value":"md`# Mutating Views\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\nSay your notebook has some value ${tex`x`}, and the main view of ${tex`x`} is a slider:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof x = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`But what if you want more than one control for ${tex`x`}? Since [views are mutable](/@mbostock/views-are-mutable-values), other cells can implement controls that mutate the main view’s value. For example, here are some buttons that increment or decrement ${tex`x`}:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"{\n const form = html``;\n form.inc.addEventListener(\"click\", () => {\n ++viewof x.value;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n });\n form.dec.addEventListener(\"click\", () => {\n --viewof x.value;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n });\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`After setting the view’s value, dispatch an *input* event to notify the Observable runtime. The runtime will then re-evaluate any referencing cell.\n\nYou can even have secondary views that are synchronized with the primary view. For example, here’s another slider that manipulates the value of ${tex`x`}, and moves if the value of ${tex`x`} changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"{\n const input = html``;\n viewof x.addEventListener(\"input\", () => {\n input.value = viewof x.value;\n });\n input.addEventListener(\"input\", () => {\n viewof x.value = input.value;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n });\n return input;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`Secondary views must be careful to avoid circular definitions: this secondary slider references only \\`viewof x\\` and not \\`x\\`, avoiding re-evaluation when ${tex`x`} changes, and instead listening (non-reactively) for *input* events.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"