Knockout validatedObservable數據綁定不按預期方式工作

我試圖將數據綁定到validatedObservable，但控件似乎不可更新爲其他knockout observables。Knockout validatedObservable數據綁定不按預期方式工作

小提琴這裏，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-\.][email protected]([\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);

任何意見如何面對呢？謝謝。

來源

2014-02-24 Eric Herlitz

爲什麼你要「更新」你的'validatedObservable'？你想通過不同的動作驗證模型的不同部分嗎？ – nemesv

不，但驗證應觸發that.registerClick –

在這種情況下，因爲你是無論如何創建一個單獨的驗證區域，我會初始化'validationErrors'在開始和創建一個'showErrorMessages'觀察，並使用它來顯示隱藏錯誤：http://jsfiddle.net/jJ9JS/1/ – nemesv

當前在創建它之後不能更新validatedObservable而不完全重新創建它。

但是，如果您不需要向其添加刪除屬性的動態方面，但您只需要根據標準顯示收集的驗證消息（當registerClick被調用時），那麼就有其他解決方案。

一個解決辦法是正常創建validatedObservable：

that.validationErrors = ko.validatedObservable({ 
    email1: that.email1, 
    firstName: that.firstName 
});

然後添加一個新的觀察到：

that.showErrorMessages = ko.observable();

和使用，在用戶界面

<div class="alert alert-danger" 
    data-bind="visible: showErrorMessages() && !validationErrors.isValid()">

，並在registerClick在驗證消息應顯示時切換：

that.registerClick = function() { 
    that.showErrorMessages(true); 
};

演示JSFiddle。

來源

2014-02-24 16:37:21 nemesv

Knockout validatedObservable數據綁定不按預期方式工作

回答

相關問題