javascript - 在 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= 并在加载时手动分配字段？

Answer 1

这里有几件事需要注意。我将假设 this.record是观察到的属性(或具有 @property 装饰器)。

首先，更改为this.record.property 不会导致刷新。 LitElement 检查是否相等，但在对象上它检查引用 - 您必须调用 requestUpdate直接导致重新渲染。

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

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