44:["$","title",null,{"children":"Synchronized Inputs | 1907040204 | Observable"}] 4c:[] 48:{"id":"01a8ce71ca24dc18","slug":"synchronized-inputs","title":"Synchronized Inputs","thumbnail":"522781857167731d09a2d221f06f714d90791d552e333b8fc153ea506509f4d1","access_level":"public","create_time":"$D2021-11-17T03:04:35.903Z","update_time":"$D2021-11-22T00:51:19.541Z","view_time":null,"first_public_time":"$D2021-11-22T00:51:42.288Z","has_unpublished_edits":null,"fork":{"id":"3c37c9bffc213235","slug":"synchronized-inputs","title":"Synchronized Inputs","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab95e94d333ab49b","login":"1907040204","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":228,"publish_version":228,"role":null,"authored":false,"authors":[{"type":"individual","id":"f754f88d18fb368a","login":"1907040204","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f754f88d18fb368a","login":"1907040204","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Synchronized Inputs","cells":[{"id":0,"value":"

Observable Inputs › BIND · API

\n\n# Synchronized Inputs\n\n[可观察输入](/@observablehq/inputs)的行为类似于原生 HTML 输入：它们公开一个值并在用户更改该值时发出输入事件。这使得它们与 [Observable 的 viewof 操作符](/@observablehq/introduction-to-views)兼容，这也意味着可以用编程方式控制输入的值。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`使用 viewof 设置输入的值需要两个步骤：\n\n1.赋予输入值(viewof x.value)\n\n2.指定输入事件(viewof x.dispatchEvent)\n\n函数:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`现在让我们来试试吧！`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof x = Inputs.range([0, 100], {step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"Inputs.button([\n [\"Set to 0\", () => set(viewof x, 0)],\n [\"Set to 100\", () => set(viewof x, 100)]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`这里 viewof *x* 指的是视图（[Range](/@observablehq/input-range) 返回的 HTMLFormElement），而 *x* 指的是视图的实时值。引用 *x* 的单元格将在 x 的值更改时运行，但仅引用 viewof *x* 的单元格仅在重新定义视图本身时运行（通常仅在加载和编辑代码时发生）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`程序控制允许多个输入值控制单个值——同步。例如，在一个长notebook中，可以在每个图表下提供辅助输入，这样读者就不必滚动来更改输入。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`Observable Input 的 **bind** 函数允许您将两个输入绑定在一起，以便与一个输入交互来更新第二个输入，反之亦然。它接受两个输入作为参数并返回第一个输入。这使得在单元格或其他地方（甚至内联）显示时，可以方便地将辅助输入绑定到现有输入。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"Inputs.bind(Inputs.range([0, 100]), viewof x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`这是一个range input ${Inputs.bind(htl.html``, viewof x)}.\n\n这是一个number input ${Inputs.bind(htl.html``, viewof x)}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`有时没有明显的“主要”输入要绑定。在这种情况下，您可以使用 Observable 的 Input 函数来创建一个轻量级的可变值存储。 Input 函数采用一个可选的初始值，可以作为第二个参数传递给 bind。请尝试拖动下方的滑块！`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof i = Inputs.input(42)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Inputs.bind(Inputs.range([0, 100]), viewof i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Inputs.bind(Inputs.range([0, 100]), viewof i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"i","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null