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。

注意：如果替换像self.person(new Model());这样的整个对象，Knockout并不总是处理得很好，所以最好只更新属性而不是扔掉整个对象。

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

所以改变你的观点：

 <input type='text' data-bind='value: name' /> <input type='text' data-bind='value: email' /> 

在这种情况下，您需要使用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。

Answer 2

我能够使它工作，这是所需的更改：

<head>                                                                           
    <script type="text/javascript" src ="knockout-2.3.0.js"></script>            
    <script type="text/javascript" src ="knockout.validation.min.js"></script>   
</head>                                                                          

<body>                                                                           
    <!-- no changes -->                                                          

    <script>                                                                     
        function VM() { ... }                           

        function Model() { ... }                        

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

    </script>                                                                    
</body>

做了什么？

包括KnockoutJS和验证插件。
添加元素后绑定。记住HTML页面是从上到下解析的。

你怎么说？在控制台中出现了这个错误：

无法读取null的属性'nodetype'

和

无法调用未定义的方法'group'

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

2 个答案: