Knockout 已验证的Observable 数据绑定未按预期工作答案

【问题标题】：Knockout validatedObservable data-bind not working as expectedKnockout 已验证的Observable 数据绑定未按预期工作
【发布时间】：2023-03-13 14:51:01
【问题描述】：

我正在尝试将数据绑定到已验证的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>

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？您想在不同的操作上验证模型的不同部分吗？
否，但验证应该在 that.registerClick 上触发
在这种情况下，因为您无论如何都要创建一个单独的验证区域，我会在开始时初始化 validationErrors 并创建一个 showErrorMessages 可观察对象并使用它来显示隐藏错误：jsfiddle.net/jJ9JS/1
@nemesv 可以，谢谢你的想法。请将其发布为答案，我会标记它！

标签： javascript knockout.js knockout-validation

【解决方案1】：

当前您无法在创建 validatedObservable 后更新它，而无需完全重新创建它。

但是，如果您不需要向其添加删除属性的这种动态方面，而只需要根据标准（当调用 registerClick 时）显示收集的验证消息，那么还有其他解决方案。

一种解决方案是正常创建validatedObservable：

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

然后添加一个新的 observable：

that.showErrorMessages = ko.observable();

并在 UI 中使用它

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

并在registerClick 中切换何时应显示验证消息：

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

演示JSFiddle.

【讨论】：