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驗證模板和多模式

回答

相關問題