我有一个带有两个按钮的组件,保存和取消。在这个组件内部有一个插槽。在这个插槽中,我把我的表单放在一些可绑定的字段中。
我-app.ts
<section-component>
<form>
<input name="testA" value.bind="varA">
<input name="testB" value.bind="varB">
</form>
</section-component>
想象一下,用户更改字段值,但决定取消此版本。当他点击取消时,它应该调用一个功能来“擦除”新数据(未保存),这些字段中的数据将恢复为原始格式(旧数据)。
我认为最好的选择是刷新这个特定组件,再次绑定旧数据。但我不确定这是最好的选择还是如何做到这一点。有人可以帮助提供见解或解决方案吗?
可能有几种策略可以解决这个问题。最重要的是,用户点击“取消”后您想要做什么。例如,如果要进行重定向,则无需执行任何操作来恢复值。从可用性的角度来看,这是有道理的。
但是,如果视图的上下文要求使用旧值的相同视图,则直接的方法是还原快照。假设您与视图绑定的模型具有以下模式。
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。
希望能帮助到你。