如何在ObservableHQ中同步Inputs.form组件内的子字段？

问题原因 #

你之前的写法viewof my_form.my_field无效，是因为viewof只能作用于单独的Observable单元格名称，不能通过链式访问表单元素的属性来获取子输入的viewof引用。my_form是表单的DOM元素对象，本身没有my_field属性，自然无法通过这种方式绑定。

正确实现方式 #

方式1：提前定义共享子输入（推荐）

先单独创建需要同步的子输入的viewof单元格，再将其组合进多个表单或输入控件中，这样可以直接通过单元格名称进行绑定：

// 定义共享的子输入，作为独立viewof单元格
viewof shared_range = Inputs.range([0, 100], {step: 1})

// 第一个分组表单
viewof my_form = Inputs.forms([
  {shared_range} // 将共享输入传入表单
])

// 创建同步的第二个输入控件
viewof synced_range = Inputs.bind(Inputs.range([0, 100], {step: 1}), viewof shared_range)

这样my_form里的shared_range字段和synced_range就会自动同步，任何一方的修改都会同步到另一方。

方式2：从现有表单中获取子输入引用

如果已经创建了表单，不想拆分单元格，可以通过表单的DOM元素获取子输入控件，再绑定到它的viewof对象（注意：这种方式依赖表单内部DOM结构，不如方式1可靠）：

// 创建分组表单
viewof my_form = Inputs.forms([
  my_field: Inputs.range([0, 100], {step: 1}),
])

// 获取表单中的子输入控件，再绑定同步
const fieldElement = my_form.elements.my_field;
viewof synced_range = Inputs.bind(Inputs.range([0, 100], {step: 1}), viewof(fieldElement));

这里利用my_form.elements获取表单内的控件集合，通过控件名称my_field拿到对应的DOM元素，再用viewof()函数获取其对应的viewof对象完成绑定。

内容的提问来源于stack exchange，提问作者xLegoz