[英]Knockout validatedObservable data-bind not working as expected
我正在嘗試將數據綁定到validatedObservable,但該控件似乎不像其他敲除的Observable一樣可更新。
在這里提琴, http://jsfiddle.net/EricHerlitz/x7UUg/
簡短說明
// variable with the data bound observable
that.validationErrors = ko.validatedObservable();
// Elements to validate
var validationGroup = {
email1: that.email1,
firstName: that.firstName
};
// Trying to use the validatedObservable in a normal knockout way doesn't work
that.validationErrors(validationGroup);
// This will fill the variable with the observable result but as usual when performing this pattern the viewmodel must be rebound.
that.validationErrors = ko.validatedObservable(validationGroup);
資源
<h3>Registrering</h3>
<div class="form-group">
<label for="Email1">E-postadress</label>
<input data-bind="value: email1" id="Email1" class="form-control" placeholder="E-postadress (du kommer få lösenords-länk skickad hit)" />
</div>
<div class="form-group">
<label for="Firstname">Förnamn</label>
<input data-bind="value: firstName" id="Firstname" class="form-control" placeholder="Förnamn" />
</div>
<button type="button" class="btn btn-primary" data-bind="click: registerClick">Registrera</button>
<div class="alert alert-danger" data-bind="visible: !validationErrors.isValid()">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4>There be dragons!</h4>
<div data-bind="foreach: validationErrors.errors">
<div data-bind="text: $data"></div>
</div>
</div>
JS
var GK = GK || {};
GK.VM = GK.VM || {};
GK.VM.Member = function (template) {
/*** Private variables ***/
var that = this;
/*** Public variables ***/
that.validationErrors = ko.validatedObservable();
// variables with validation, https://github.com/Knockout-Contrib/Knockout-Validation
that.email1 = ko.observable().extend({
required: { params: true, message: "missingEmail" },
pattern: { params: /^([\d\w-\.]+@([\d\w-]+\.)+[\w]{2,4})?$/, message: "wrongEmailFormat" }
});
that.firstName = ko.observable().extend({
required: { params: true, message: "missingFirstName" }
});
that.registerClick = function () {
// Elements to validate
var validationGroup = {
email1: that.email1,
firstName: that.firstName
};
// This would be ideal but doesn't work
//that.validationErrors(validationGroup);
//console.log(that.validationErrors.errors()); // does not contain any erros
// This will destroy the data-bind but register the validatedObservable
// Requires rebinding of the control :(
that.validationErrors = ko.validatedObservable(validationGroup);
console.log(that.validationErrors.errors()); // contains errors
};
};
var viewModel = new GK.VM.Member();
ko.applyBindings(viewModel);
有什么建議如何處理嗎? 謝謝。
當前,您無法在沒有完全重新創建validatedObservable
之后對其進行更新。
但是,如果您不需要向其中添加刪除屬性的動態方面,而只需要根據條件(在調用registerClick
時)顯示收集的驗證消息,則可以找到其他解決方案。
一種解決方案是正常創建validatedObservable
:
that.validationErrors = ko.validatedObservable({
email1: that.email1,
firstName: that.firstName
});
然后添加一個新的observable:
that.showErrorMessages = ko.observable();
並在用戶界面中使用
<div class="alert alert-danger"
data-bind="visible: showErrorMessages() && !validationErrors.isValid()">
並在registerClick
中切換顯示驗證消息的時間:
that.registerClick = function () {
that.showErrorMessages(true);
};
演示JSFiddle 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.