Javascript 动态观测的KnockoutJS验证_Javascript_Knockout.js_Knockout Validation

Javascript 动态观测的KnockoutJS验证

javascript knockout.js

Javascript 动态观测的KnockoutJS验证,javascript,knockout.js,knockout-validation,Javascript,Knockout.js,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

我正在使用这个插件，我正在尝试验证一个动态加载的对象

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>


一,。点击“加载”
二,。点击“显示错误”，或随意更改输入数据

负载


这是正常工作。


这是行不通的。


显示错误

拨弄

如何实现这一点？

只有当通过敲除解析绑定时，您的属性已验证，验证插件才会应用于您的绑定中

换言之：在将属性绑定到UI上后，您不能向属性添加验证

在您的示例中，您正在

self.person=ko.observable（{}）中使用一个空对象

作为默认值，因此，当Knockout执行

数据绑定='value:person（）.name'

表达式时，您没有

名称

属性，因此即使稍后将

名称

属性添加到对象中，验证也不会工作

在您的示例中，您可以通过更改

模型

构造函数以包含验证规则来解决此问题：

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

并使用空的

模型

对象作为默认人员：

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

调用

Load

时，不要替换

person

对象，而是更新其属性：

self.load = function() {

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

演示。

注意：如果您替换整个对象，比如

self.person（newmodel（）），则Knockout并不总是处理得很好
另一种解决方案是将与
绑定一起使用，因为在与
绑定中，如果绑定属性发生更改，KO将重新评估绑定
因此，改变你的观点：
<!-- ko with: person -->
    <input type='text' data-bind='value: name' />
    <input type='text' data-bind='value: email' />
<!-- /ko -->

在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'); 
}

演示。
我能够使它工作，以下是所需的更改：
<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> 


函数VM（）{…}
函数模型（）{…}
//ko.validation.init（）；
var vm=新vm（）；
ko.应用绑定（vm）；

做了什么

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

你怎么知道？在控制台中出现以下错误：
无法读取null的属性“nodetype”
及
无法调用未定义的方法“组”
嗯，您的测试代码可能有问题，我的测试代码中没有这样的错误，我没有使用JSFIDLE，所以我指出了可能出现的错误。面对类似问题的任何其他人都应该留意（气味）的种类。无论如何，你能让它正常工作吗？“在属性绑定到UI上后，你不能向属性添加验证。”你能分享一下你是如何得出这个结论的吗？@ebramtharwat来自插件的源代码。。。验证插件正在修改值
和已检查的
出价，并在init
函数中检查绑定属性是否可验证。如果属性在init
中不可验证，则验证插件不再关心该属性：如果执行value:person（）.name
并且替换了person的值，则将重新评估绑定。但是，它不会再次调用init；更新一下。你试过我建议的解决方案了吗？它们对你有用吗，或者你需要进一步的帮助吗？@nemesv我认为你的解决方案非常有效，两者都是。我只是在等待接受，因为有人在这上面开了一个赏金哦，我没有注意到你不是那个盯着赏金看的人。。。那么@artlung你试过我提出的解决方案了吗？它们对你有用吗（它们对布拉佐夫很有效），或者你需要进一步的帮助吗？@nemesv我提供了赏金，只是因为我认为这个问题需要更多的关注。我最近用悬赏来回答我自己的问题，得到了很大的帮助，我想回答一个knockout.js问题。我会对OP想要的任何帖子或得到最多选票的任何问题给予奖励。你希望得到奖励的答案是什么？
<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>