如何在Observablehq中创建带有标签的输入字段

Question

我可以用这段代码创建一个输入文本框。在同一行中添加标签，同时仍然将其绑定到相同的全局变量，最佳方法是什么？

viewof myText = html`<input type="text" value="initial value">

我想要

viewof myText = html`Enter something: <input type="text" value="initial value">

但是myText不绑定到输入字段。

Answer 1

实现这一效果的最简单方法是使用杰里米的输入笔记本，其中包括标有标签的文本框。您只需将textbox方法import到您的笔记本中，就可以解决一般问题。

不导入另一个笔记本，最简单的方法是：

viewof myText = {
  let form = html`Enter something: <input type="text" value="initial value">`;
  form.addEventListener('input', e => {
    form.value = e.target.value
  });
  return form;
}

viewof读取返回给它的内容的.value属性，这段代码将.value属性设置为包含的输入的值。当输入元素是单元格中唯一的东西时，视图不需要任何额外的代码，但是如果有多个元素都有值，用户代码需要告诉笔记本，哪个输入提供了值。

Answer 2

目前(2021年10月)，可观测输入是向笔记本添加输入元素的首选方法。见介绍性笔记本和收藏

viewof myText = Inputs.text({
  label: "Enter something",
  placeholder: "Text",
  value: "Initial value"
})