observablehq - 在 Observable 中：如何让按钮单击以调用函数

Question

我正在生成一个带有“html”库函数的行列表。我在每一行上放了一个按钮，并希望它在单击时调用一个函数。我试过了：

html`<div>Line text <button type="button" onclick="myFunction()">Click</button></div>`

myFunction在笔记本中定义，但单击按钮时不会调用它。我的使用在“html”中有几十行，而不仅仅是一行。

Answer 1

你也可以试试这个由 Observable htl - Hypertext Literal制作的新模板库

模板

    html`<button onclick=${() => ++mutable clicks}>click me</button>`

可变或你的函数

    mutable clicks = 0

Answer 2

我进行了更多搜索，发现了 Mike Bostock 的这个笔记本，它在一个例子中间接回答了这个问题。我需要做的是：

{
  const form = html`<form onsubmit="return false;">
    <div>Line text <button name="myButton">Click</button></div>
  </form>`;
  form.myButton.onclick = () => {
    // put the button click code here
  };
  return form;
}

我希望这对其他人有帮助。