KnockoutJS验证模板和多模式

我有两页，第一个是登录页面，简单：KnockoutJS验证模板和多模式

型号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家长

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

型号KnockoutJs儿童

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

输入在这种情况下包含在一个块中

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

验证模板是相同的。

所以，图标不会出现，但边框，是的。

当我检查代码时，KnouckoutJs没有在每个输入上“传播”模板。

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

谢谢你的帮助。

约恩

来源

2014-01-09 Yoann

控制台中是否存在任何绑定错误？可能你需要改变你的模板事件：{mouseover：$ root.layout.errorTooltip}“'... – nemesv

在控制台中没有错误layout是一个窗口属性out of Knockout Model – Yoann

你可以把jsfiddle你在哪里repro这个问题？ – nemesv

好吧，我发现这个问题，它不是使用多模式或验证模板相链接的。

我当时想的后续数据绑定：

//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));

，一切工作正常。

谢谢:)

来源

2014-01-12 23:13:31 Yoann

KnockoutJS验证模板和多模式

回答

相关问题