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

Question

考虑以下列表:

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"
    }];
}

我想在更改后保存列表(可能在几秒钟后，如 throttle )。一旦其中一个文本框发生更改，如何将处理程序引入 Fields 类以调用？我不是在谈论 blur 事件处理程序。

Answer 1

在触发 DOM input 事件时保存。使用 debounce 绑定(bind)行为来限制保存速率。

这是一个例子: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`;
  }
}