我有一个编辑表单,我希望禁用"保存"按钮,直到对绑定到输入或选择元素的其中一个属性进行编辑.
但是,如果用户将文本编辑回原始值,则表单不应再被视为脏.
例:
原始值:"测试" - 不肮脏
用户编辑输入并将值更改为:"测试2" - 脏
用户再次编辑输入并将值更改回"测试" - 不脏
我看到这篇文章描述了如何创建dirtyBindingBehavior,但它只将新值与之前的值进行比较 - 在这种情况下,上面的第3行将导致仍然将表单列为Dirty,因为它将比较旧值"测试2"对"测试"的新值.
有关如何实现这一目标的任何想法?
您只需要创建对象的副本并创建一个getter属性,该属性将old-object与new-object进行比较(用于@computedFrom
避免脏检查).例如:
import {computedFrom} from 'aurelia-framework'; export class App { oldModel = new Model(); newModel = deepClone(this.oldModel); @computedFrom('newModel.name', 'newModel.surname') get hasChanged() { return !isEqual(this.oldModel, this.newModel); } } function deepClone(obj) { return JSON.parse(JSON.stringify(obj));; //use Object.assign({}, obj) if you don't need a deep clone } function isEqual(obj1, obj2) { return JSON.stringify(obj1) === JSON.stringify(obj2); } class Model { //something from database; name = 'John'; surname = 'Doe'; }
运行示例https://gist.run/?id=d9f7ee41f4448d7981351c7e222d7388