使用动态可观察量进行KnockoutJS验证

Question

我正在使用这个插件https://github.com/ericmbarnard/Knockout-Validation,我正在尝试验证动态加载的对象.

使用Javascript:

function VM() {
    var self = this;
    // This is a static observable, just to ensure that basic validation works fine.
    self.static = ko.observable();
    self.static.extend({required: true});

    // This is the observable that will be updated to my model instance.
    self.person = ko.observable({});

    // This is an handler for manual trigger.
    // I'm not even sure this is needed.
    self.a = function(){
        self.errors.showAllMessages();
        self.staticErrors.showAllMessages();
    }

    // Here i'm loading current person from somewhere, i.e. a rest service.
    self.load = function() {
        // Update observable
        self.person(new Model());

        // Define validation rules
        self.person().name.extend({required: true});
        self.person().email.extend({required: true});

        // Set person data
        self.person().name('Long');
        self.person().email('John'); 

        // Set validators
        self.errors = ko.validation.group(self.person);
        self.staticErrors = ko.validation.group(self.static);
    }
}

// Just a test model.
function Model() {
    this.name = ko.observable();
    this.email = ko.observable();
}

ko.validation.init();
var vm = new VM();
ko.applyBindings(vm);

标记

<ul>
    <li>1. Hit "Load"</li>
    <li>2. Hit "Show errors", or maunally change input data.</li>
</ul>
<button data-bind='click: load'>Load</button>
<br/>

<h1>This is working properly.</h1>
<input type='text' data-bind='value: static' />
<br/>

<h1>This is not working.</h1>
<input type='text' data-bind='value: person().name' />
<input type='text' data-bind='value: person().email' />
<br/>
<button data-bind='click: a'>Show errors</button>

小提琴 http://jsfiddle.net/qGzfr/

我该如何工作？

Answer 1

验证插件仅在绑定被Knockout解析时才会应用于绑定中,您的属性才会生效.

换句话说:在UI上绑定属性后,无法向属性添加验证.

在您的示例中,您使用空对象self.person = ko.observable({});作为默认值,因此当Knockout执行data-bind='value: person().name'表达式时您没有name属性,因此即使稍后将name属性添加到对象,验证也将无效.

在您的示例中,您可以通过更改Model构造函数来包含验证规则来解决此问题:

function Model() {
    this.name = ko.observable().extend({required: true});
    this.email = ko.observable().extend({required: true});
}

并使用空Model对象作为默认人:

self.person = ko.observable(new Model());

并且当调用Load时不替换person对象但更新其属性:

self.load = function() {

    // Set person data
    self.person().name('Long');
    self.person().email('John'); 
}

演示JSFiddle.

注意:如果你替换整个对象,Knockout并不总能很好地处理,self.person(new Model());所以无论如何更好的做法是只更新属性而不是丢弃整个对象.

另一种解决方案是使用with绑定,因为在绑定内部,with如果绑定属性发生更改,KO将重新评估绑定.

所以改变你的看法:

<!-- ko with: person -->
    <input type='text' data-bind='value: name' />
    <input type='text' data-bind='value: email' />
<!-- /ko -->

在这种情况下,您需要使用null默认值person:

self.person = ko.observable();

并且在您Load需要在分配person属性之前添加验证,以便在KO应用绑定时,您的属性具有验证:

self.load = function() {

    var model = new Model()

    model.name.extend({required: true});
    model.email.extend({required: true});

    self.person(model);

    // Set person data
    self.person().name('Long');
    self.person().email('John'); 
}

演示JSFiddle.