1

我正在使用带有 Knockout-Validation 插件的 KnockoutJS 来验证表单上的字段。我在使用本机验证规则验证值是否唯一时遇到问题 -unique

我正在使用 Ryan Niemeyer 的编辑器模式来允许用户编辑或创建Location. 这是我的小提琴，可以完整地查看我的问题。

function Location(data, names) {
    var self = this;

    self.id = data.id;
    self.name = ko.observable().extend({ unique: { collection: names }});
    // other properties
    self.errors = ko.validation.group(self);

    // update method left out for brevity
}

function ViewModel() {
    var self = this;

    self.locations = ko.observableArray([]);   

    self.selectedLocation = ko.observable();
    self.selectedLocationForEditing = ko.observable();

    self.names = ko.computed(function(){
        return ko.utils.arrayMap(self.locations(), function(item) {
            return item.name();
        });
    });  

    self.edit = function(item) {
        self.selectedLocation(item);
        self.selectedLocationForEditing(new Location(ko.toJS(item), self.types));
    };

    self.cancel = function() {
        self.selectedLocation(null);
        self.selectedLocationForEditing(null);
    };

    self.update = function(item) {
        var selected = self.selectedLocation(),
            updated = ko.toJS(self.selectedLocationForEditing()); //get a clean copy

        if(item.errors().length == 0) {
            selected.update(updated);
            self.cancel();
        }
        else
            alert("Error");        
    };

    self.locations(ko.utils.arrayMap(seedData, function(item) {
        return new Location(item, self.types, self.names());
    })); 
}

我有一个问题。由于Location正在编辑的对象是从locationsobservableArray 中“分离”的（参见方法），因此当我在 detached中Location.edit进行更改时，计算数组中的值不会更新。因此，当验证规则将其与数组进行比较时，它将始终返回 true 的有效状态，因为计数器只会为 1 或 0。（请参阅下面的淘汰验证算法）nameLocationnamesnames

在unique验证规则的选项参数中，我可以为externalValue. 如果此值未定义，那么它将检查匹配名称的计数是否大于或等于 1 而不是 2。这适用于用户更改名称、转到另一个字段然后返回的情况除外到名称，并希望将其更改回原始值。该规则只看到该值已存在于names数组中，并返回一个有效的 false 状态。

这是来自 knockout.validation.js 的处理unique规则的算法......

function (val, options) {
    var c = utils.getValue(options.collection),
        external = utils.getValue(options.externalValue),
        counter = 0;

    if (!val || !c) { return true; }

    ko.utils.arrayFilter(ko.utils.unwrapObservable(c), function (item) {
        if (val === (options.valueAccessor ? options.valueAccessor(item) : item)) { counter++; }
    });
    // if value is external even 1 same value in collection means the value is not unique
    return counter < (external !== undefined && val !== external ? 1 : 2);
}

我曾考虑将其用作创建自定义验证规则的基础，但是当用户想要返回原始值时，我一直被困在如何处理这种情况上。

我感谢任何和所有的帮助。

4

1 回答 1

1

一种可能的解决方案是在唯一验证器中不包含 name当前编辑项目的 （当然，在创建新项目时您需要完整列表）。

因此，将 Location 名称更改回其原始值时不会触发唯一检查：

self.namesExceptCurrent = function(name){
    return ko.utils.arrayMap(self.locations(), function(item) {
        if (item.name() !== name)
            return item.name();
    });
}

self.edit = function(item) {
    self.selectedLocation(item);
    self.selectedLocationForEditing(
        new Location(ko.toJS(item), 
        self.types, 
        self.namesExceptCurrent(item.name())));
};

演示JSFiddle。

于 2013-04-11T16:18:29.580 回答