javascript – KnockoutJS验证与动态可观察

我正在使用这个插件 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/

我该如何使这项工作？

解决方法

验证插件仅在您的绑定中应用,只有当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.

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

一个不同的解决方案是使用with绑定,因为在绑定绑定KO将重新评估绑定,如果绑定的属性改变.

所以改变你的看法：

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

在这种情况下,您需要使用null作为默认的人：

self.person = ko.observable();

在您的加载中,您需要在分配您的人员属性之前添加验证,以便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.

javascript – KnockoutJS验证与动态可观察

解决方法

猜你在找的JavaScript相关文章