如何刷新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 ， 请点击此处 。

希望能帮助到你。