1

我正在做 KnockOut 验证，到目前为止一切都很好。不过我确实有一个问题。我有一些如下代码：

 shippingMethodModel.Description.extend({ required: true });

这在下面显示了一条验证消息，但它是否设置了一个标志或我可以阅读的东西来禁用我的保存按钮？

4

2 回答 2

2

我最近也有同样的需求，所以我会尝试根据您上面提供的代码行来翻译我所做的...

尝试添加类似于以下内容的 ko.computed observable：

shippingMethodModel.formIsNotValid = ko.computed(function () {
    // original line
    // var errors = ko.utils.unwrapObservable(ko.validation.group(self));

    // ** oops, not "self" in this case

    // UPDATED line
    var errors = ko.utils.unwrapObservable(ko.validation.group(shippingMethodModel));
    return (errors.length > 0);
});

更新 在注意到我的错误后，我在上面的代码中进行了更正。

对于那些一次性将此类模型/类声明为函数的人，此代码可能类似于以下内容：

var ShippingMethodModel = function () {
    var self = this;
    self.shippingMethodId = ko.observable().extend({ required: true });
    self.description = ko.observable().extend({ required: true });

    self.formIsNotValid = ko.computed(function () {
        var errors = ko.utils.unwrapObservable(ko.validation.group(self));
        return (errors.length > 0);
    });
};

/更新

UPDATE2 根据@ericb 在下面的评论中的输入，我对实现自己的解决方案的方式进行了更改，我将通过调整上面更新中的示例代码来演示：

var ShippingMethodModel = function () {
    var self = this;
    self.shippingMethodId = ko.observable().extend({ required: true });
    self.description = ko.observable().extend({ required: true });

    self.formIsNotValid = ko.observable(false);

    self.validateObservableFormField = function (nameOfObservableToValidate, 
                                                 data, event) {
        for (var prop in data) {
            if (prop === nameOfObservableToValidate) {
                var theObservable = data[prop];
                theObservable.valueHasMutated();
                ko.validation.validateObservable(theObservable);
                if (theObservable.error) {
                    self.formIsNotValid(true);
                }
                else {
                    if (self.formIsNotValid()) {
                        var errors = 
                            ko.utils.unwrapObservable(ko.validation.group(self));
                        self.formIsNotValid(errors.length > 0);
                    }
                }
                return;
            }
        }
    };        
};

请注意，我现在已将其定义formIsNotValid为可观察对象，但我正在使用该validateObservableFormField函数来帮助我确定提交前表单的有效性。此更改确保ko.validation.group仅在需要时调用该函数，并且仅当正在验证的 observable 有效但formIsNotValid为 true 时才需要调用（以处理当前 observable 设置formIsNotValid为 true 的情况）。

这是我如何执行此操作的示例：

<input data-bind="value: description, 
                  event: { blur: function(data, event) {
                                     validateObservableFormField('facilityName', 
                                                                  data, 
                                                                  event) 
                                 }
                         }" />

愚蠢的格式以消除水平滚动

注意：我已经在使用这种技术，但我已经对其进行了调整以提高检查表单是否有效的性能。@Californicated，在我上次发表评论后，我意识到从验证表单字段的模糊事件调用此函数是我看到我的保存/提交按钮在启用和禁用状态之间切换的原因。

再次感谢 @ericb 提供的性能提示。

任何人的进一步提示，总是受欢迎的！

/更新2

一旦你做到了，禁用按钮就是以formIsNotValid任何对你打算如何禁用按钮有意义的方式绑定到计算的 observable 的问题，例如css: { 'ui-state-disabled': formIsNotValid }和/或disable: formIsNotValid和/或其他一些方法。

希望这会有所帮助，如果您遇到麻烦，请告诉我。

于 2012-09-12T21:01:33.973 回答
2

我会设置以下内容：

saveEnabled = ko.computed(function(){
    // possible other logic
    return shippingMethodModel.Description.isValid();
});

然后在您的 HTML 中：

<button data-bind="enable: saveEnabled"> Save </button>

或者，如果您的模型上有多个属性，您可以执行以下操作：

ko.validation.group(shippingMethodModel);

然后在您的 HTML 中：

<button data-bind="enable: isValid"> Save </button>

该group函数将一个isValid属性添加到它的任何组中。

于 2012-09-12T21:28:59.943 回答