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

Question

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

我的-app.ts

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

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

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

Answer 1

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

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

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 只是一个原始数据容器，不提供任何功能（不是任何用户定义的实例 class 提供额外的方法等；在这种情况下你还需要恢复原型）。

如果您想要 "undo" 操作而不是 "cancel"，并且如果您已经在使用 aurelia-store，则 check here。

希望对您有所帮助。

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

How can I refresh a child component in Aurelia to undo a form?

html

typescript

aurelia