Question

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

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

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与locations observableArray“分离”（请参阅Location.edit方法），因此当我对分离的name中的Location进行更改时names计算数组中的值未更新。因此，当验证规则将其与names数组进行比较时，它将始终返回有效状态true，因为计数器只会是1或0.（请参阅下面的敲除验证算法）

在unique验证规则的options参数中，我可以传入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);
}

我已经考虑过将此作为创建自定义验证规则的基础，但是当用户想要返回原始值时，我一直陷入如何处理这种情况的困境。

我感谢任何帮助。

Answer 1

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

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

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.

使用Knockout-Validation插件进行唯一值验证

1 个答案: