如何刷新Aurelia中的子組件以撤消表單？

Question

我有一個帶有兩個按鈕的組件，保存和取消。 在這個組件內部有一個插槽。 在這個插槽中，我把我的表單放在一些可綁定的字段中。

我-app.ts

<section-component>
 <form>
  <input name="testA" value.bind="varA">
  <input name="testB" value.bind="varB">
 </form>
</section-component>

想象一下，用戶更改字段值，但決定取消此版本。 當他點擊取消時，它應該調用一個功能來“擦除”新數據（未保存），這些字段中的數據將恢復為原始形式（舊數據）。

我認為最好的選擇是刷新這個特定組件，再次綁定舊數據。 但我不確定這是最好的選擇還是如何做到這一點。 有人可以幫助提供見解或解決方案嗎？

Answer 1

可能有幾種策略可以解決這個問題。 最重要的是，用戶點擊“取消”后您想要做什么。 例如，如果要進行重定向，則無需執行任何操作來恢復值。 從可用性的角度來看，這是有道理的。

但是，如果視圖的上下文要求使用舊值的相同視圖，則直接的方法是還原快照。 假設您與視圖綁定的模型具有以下模式。

model: { varA: anyType, varB: anyType }

而且你綁定它如下。

<input name="testA" value.bind="model.varA">
<input name="testB" value.bind="model.varB">

然后，您只需保存原始模型的快照並稍后將其還原，如下所示。

//save the snapshot
this.snapshot = JSON.parse(JSON.stringify(this.model))

//....

// restore the snapshot when user clicks cancel
this.model = this.snapshot

其余的應該由已經到位的綁定來處理。 請注意，這里的假設是model只是數據的原始容器，並且不提供任何功能（不是任何提供其他方法等的用戶定義類的實例;在這種情況下，您還需要恢復原型） 。

如果您想要“撤消”操作而不是“取消”，如果您已經使用了aurelia-store ， 請點擊此處 。

希望能幫助到你。