Question

我有两个页面，第一个是登录页面，简单：

模型KnockoutJs

function Login(){
   var self=this;
   self.email = ko.observable().extend({ email: true, required: true });
   self.password = ko.observable().extend({ required: true});
}

模型绑定

$(function () {
  ko.validation.configure({
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'validation',
    messageTemplate: "ValidationTemplate",
    errorsAsTitle: false
  });
  var login = new Login();
  ko.applyBindings(login);
});

模板定义

<script type="text/html" id="ValidationTemplate">
    <span data-bind="attr: { error: field.error }, 
    visible: field.isModified() && !field.isValid(), 
    event: { mouseover: layout.errorTooltip }" 
    class="glyphicon glyphicon-exclamation-sign f-validation-message"></span>
</script>

一切正常，输入的小图标会出现红色边框。

然后是另一个页面，模型层次结构：

模型KnockoutJs Parent

function Parent()
{
  var self=this;
  self.child= new Child();
}

模型KnockoutJs Child

function Child()
{
  var self=this;
  self.val1= ko.observable().extend({ required: true });
  self.val2= ko.observable().extend({ required: true });
}

模型父绑定

$(function () {
  ko.validation.configure({
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'validation',
    messageTemplate: "ValidationTemplate",
    errorsAsTitle: false
  });
  var parent= new Parent();
  ko.applyBindings(parent);
});

在这种情况下，输入包含在with块

中

<div data-bind="with:$root.child">
...
</div>

验证模板是相同的。

因此，图标不会出现，而是边框，是的。

当我检查代码时，KnouckoutJs没有＆＃34;传播＆＃34;每个输入上的模板。

唯一的区别是多模型系统，但不确定它如何影响绑定？

感谢您的帮助。

的Yoann

Answer 1

好的，我发现了问题，它根本没有与多模型或验证模板相关联。

我绑定的数据如下：

//data: JS object
self.obsProp(ko.mapping.fromJS(data));
self.obsProp().value1.extend({required:true});
self.obsProp().value2.extend({required:true});

错误方式，通过验证映射数据的正确方法：

var validationMapping = {
  value1: {
   create: function(options) {
      return ko.observable(options.data).extend( {required: true} );
       }
    },
  value2: {
   create: function(options) {
      return ko.observable(options.data).extend( {required: true} );
       }
    }
};
self.obsProp(ko.mapping.fromJS(data,validationMapping));

一切正常。

谢谢：）

KnockoutJS验证模板和多个模型

1 个答案: