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

我想在列表更改后保存列表（可能在几秒钟之后，如油门）。如果其中一个文本框被更改，我如何向Fields类引入一个处理程序？我不是在谈论blur事件处理程序。

Answer 1

在触发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`;
  }
}

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

1 个答案: