30:[] 2e:{"title":"Synchronized Views","cells":[{"id":0,"value":"md`# Synchronized 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\n[A view](/@mbostock/introduction-to-views) conveniently defines an interactive value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof x = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"x","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`While each interactive value is often independent, other times multiple controls manipulate a shared value. This requires synchronizing views such that interaction with any one view updates both the interactive value and the other views.\n\nOne way to synchronize is to treat [views as mutable values](/@mbostock/views-are-mutable-values): make one view the “primary” view, and have the other “secondary” views listen to and mutate the primary view. But sometimes it isn’t obvious which view should be primary.\n\nA more general approach is a *minimal* view: a container for a mutable value that implements the [EventTarget](https://developer.mozilla.org/docs/Web/API/EventTarget) interface, making it compatible with \\`viewof\\`. This minimal view also exposes a *view*.value property representing its current value; setting the value causes the view to dispatch an *input* event, which in turn causes Observable to [rerun](/@mbostock/how-observable-runs) any referencing cells.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"class View {\n constructor(value) {\n Object.defineProperties(this, {\n _list: {value: [], writable: true},\n _value: {value, writable: true}\n });\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent(new CustomEvent(\"input\", {detail: value}));\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n bind(input, invalidation) {\n return bind(input, this, invalidation);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`Now let’s define a minimal view whose initial value is 42:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof y = new View(42)","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`Here’s our view’s value:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"y","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`And now let’s define an input that both listens to the minimal view and assigns a new value on interaction. Notice that dragging the slider changes the value of *y*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"viewof y.bind(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"md`Here are two more inputs (of different types!) bound to the same view. Interacting with either view below updates *y* as well as the other synchronized inputs above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"viewof y.bind(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"viewof y.bind(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"y","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`It works with text, too.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"viewof name = new View(\"fred\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"viewof name.bind(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"viewof name.bind(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"name","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"viewof toggled = new View(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"viewof toggled.bind(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"viewof toggled.bind(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"toggled","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`---\n\n## Appendix\n\nThis implementation uses my [disposal promise](/@mbostock/disposal) to detach bound inputs, rather than requiring you to pass the [invalidation promise](/@observablehq/invalidation) explicitly. The unification of various input types is based on [Generators.input](https://github.com/observablehq/stdlib/blob/master/README.md#Generators_input) from the Observable standard library.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"function bind(input, view, invalidation = disposal(input)) {\n set(input, view.value);\n input[`on${eventof(input)}`] = () => view.value = get(input);\n const update = ({detail: value}) => get(input) === value || set(input, value);\n view.addEventListener(\"input\", update);\n invalidation.then(() => view.removeEventListener(\"input\", update));\n return input;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"function get(input) {\n switch (input.type) {\n case \"range\":\n case \"number\": return input.valueAsNumber;\n case \"date\": return input.valueAsDate;\n case \"checkbox\": return input.checked;\n case \"file\": return input.multiple ? input.files : input.files[0];\n default: return input.value;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"function set(input, value) {\n switch (input.type) {\n case \"range\":\n case \"number\": input.valueAsNumber = value; break;\n case \"date\": input.valueAsDate = value; break;\n case \"checkbox\": input.checked = value; break;\n case \"file\": input.multiple ? (input.files = value) : (input.files = [value]); break;\n default: input.value = value;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"function eventof(input) {\n switch (input.type) {\n case \"button\":\n case \"submit\": return \"click\";\n case \"file\": return \"change\";\n default: return \"input\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"import {disposal} from \"@mbostock/disposal\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}