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

Question

我有一个带有两个按钮的组件，保存和取消。该组件内部有一个插槽。在这个插槽中，我将我的表单与一些可绑定(bind)的字段放在一起。

我的应用程序.ts

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

假设用户更改字段值但决定取消此版本。当他点击取消时，它应该调用一个函数来“删除”新数据(未保存)并且这些字段中的数据恢复到他的原始形式(旧数据)。

我在想最好的选择是刷新这个特定的组件，再次绑定(bind)旧数据。但我不确定这是最好的选择或如何去做。有人可以帮助提供见解或解决方案吗？

Answer 1

可能有几种策略可以解决这个问题。这里最重要的是，在用户点击“取消”后你想做什么。例如，如果你想进行重定向，那么你不必为恢复值做任何事情。从可用性的角度来看，这是有道理的。

但是，如果 View 的上下文需要具有旧值的相同 View ，则直接的方法是恢复快照。假设您与 View 绑定(bind)的模型具有以下架构。

model: { varA: anyType, varB: anyType }

并且您按如下方式绑定(bind)它。

<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

其余的应该由已经存在的绑定(bind)处理。请注意，这里的假设是 model 只是一个原始数据容器，不提供任何功能(不是任何提供附加方法等的用户定义类的实例；在这种情况下，您需要也可以恢复原型(prototype))。

如果您想要“撤消”操作而不是“取消”，并且您已经在使用 aurelia-store，那么 check here .

希望对您有所帮助。