Question

我有一个带有两个按钮的组件，即保存和取消。在该组件内部有一个插槽。在此插槽内，我在表单中放置了一些可绑定的字段。

my-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，那么请check here。

希望有帮助。

如何刷新Aurelia中的子组件以撤消表单？

1 个答案: