使用lit-html/lit-element添加/编辑表单的最佳实践

Question

我有一个相当复杂的表单，希望确保它在编辑和“新记录”表单中都能正常工作。 实际上，表单的提交被阻止，并且实际上发送了JSON。然而，这不是重点。 此外，this.record在加载时被赋值（用于编辑），对于新记录则为空对象。

render () {
  return html`
    <form>
      <input type="text" .value="${this.record.description}">
      <input type="text" .value="${this.record.remarks}">
    </form>
  `
}

这个想法是，如果表单已经被呈现出来，并且存在this.record中的数据，那么它将会默认填充这些数据。

这个想法有一个前提条件，就是在表单提交之前，this.record不会被改变 -- 如果它改变了，用户输入的内容也会被覆盖掉。

上述描述是否符合最佳实践？还是最好不要使用.value=，并在加载时手动赋值字段？

- Merc

Answer 1

这里有几件事情需要注意。我假设this.record是一个观察属性（或者有一个@property装饰器）。

首先，对this.record.property的更改不会导致刷新。LitElement检查相等性，但在对象上检查引用 - 您将不得不直接调用requestUpdate来引起重新渲染。

其次，如果您更改输入值，LitElement不会与当前DOM值进行比较，而是与分配的值进行比较。如果您想与DOM值进行比较，请使用live。您可以使用它来确保当添加的值相同时，对this.record的更改不会更新DOM。

在这种情况下，当我需要提交表单或JSON以实际进行更改时，我使用两个对象：一个表示来自服务器的值（具有TS Readonly<T>约束条件或Object.freeze确保我不会更改它），另一个保存用户更改，我可以将其发送回服务器。然后，当发生渲染时，我知道发生了什么变化（并且可以显示出来）。

- Keith