javascript - 没有名称的属性的更改处理程序

考虑以下列表：

fields.html

<div repeat.for="f of fields">
    ${f.name}: <input value.bind="f.value">
</div>

fields.js

class Fields
{
    fields = [{
        name: "First name",
        value: "Jack"
    }, {
        name: "Surname",
        value: "Giant slayer"
    }];
}

我想保存更改后的列表（也许在几秒钟后，例如节气门）。一旦更改了一个文本框，如何在Fields类中引入要调用的处理程序？而且我不是在谈论blur事件处理程序。

最佳答案

触发DOM input事件时保存。使用debounce绑定行为来对保存进行速率限制。

这是一个示例：https://gist.run?id=26ea2f5e3a2c35ecd96ff9aa579a893f

app.html

<template>
  <form input.delegate="save() & debounce:500">
    <label repeat.for="f of fields">
      ${f.name}: <input value.bind="f.value">
    </label>
  </form>

  <pre><code>${log}</code></pre>
</template>

app.js

export class App {
  fields = [
    { name: "First name", value: "Jack" },
    { name: "Surname",    value: "Giant slayer" }
  ];

  log = '';

  save() {
    this.log += `Saved: ${JSON.stringify(this.fields)}\n`;
  }
}