KnockoutJS 实时验证本地化

Posted 2023-03-27

【中文标题】KnockoutJS 实时验证本地化

【英文标题】：KnockoutJS Live Validation Localization

【发布时间】：2014-06-22 12:41:21

【问题描述】：

我正在尝试本地化 KnockoutJS 验证插件，但我需要能够在语言之间动态切换。有一个 issue open on the plugin，但它已有 2 年以上历史（并且仍在营业）。

我只是想在加载所有内容后切换验证消息的语言。这是一个例子（可以在小提琴上看到：http://jsfiddle.net/Kikketer/S6j2q/）

<input data-bind='value: phone' />
<div data-bind="text: phone"></div>
<button type='button' data-bind="click: v">Validate</button>
<button type='button' data-bind='click: switchLanguage'>Switch Language</button>

使用以下JS：

ko.validation.configure(
    registerExtenders: true
);
// If I localize right away, things work
ko.validation.localize(required: '**Required');

var InterviewTwo = function() 
    // Standard "required" validator
    this.phone = ko.observable().extend(required: true);

    // Group all of the validators
    this.errors = ko.validation.group(this);

    // Validation function
    this.v = function() 
        this.errors.showAllMessages();
    ;

    // Switching languages after or before the validation
    this.switchLanguage = function() 
        // If I localize later, nothing is changed.
        ko.validation.localize(required: 'eh... sorta?');
        ko.validation.registerExtenders();
    ;
;

ko.applyBindings(new InterviewTwo());

我注意到在敲除代码中，错误的 getter 方法总是返回第一个本地化错误字符串。如何“重新初始化”错误字符串？

来自 KnockoutJS 第 736 行：

var errorMsgAccessor = function () 
    if (!config.messagesOnModified || isModified) 
        return isValid ? null : obsv.error; <<<< obsv.error is always the first error message
     else 
        return null;
    
;

【问题讨论】：

我不太确定是什么问题。它似乎在这里工作：jsfiddle.net/8MWGR。单击验证，您会看到“此字段为必填项”。然后输入一些内容以删除该消息。然后点击切换语言，如果你删除文本你会看到“嗯...排序？”

好电话，行得通。我想我要做的是在切换语言（然后重新验证）时以编程方式清除错误，或者在按下“切换语言”按钮时切换错误字符串。

【参考方案1】：

您的代码更新了本地化，但新消息仅在下一次更新时有效。

将 switchLanguage 替换为：

this.switchLanguage = function() 
    // If I localize later, nothing is changed.
    ko.validation.localize(required: 'eh... sorta?');
    for (var prop in this)
        if (ko.isObservable(this[prop]) && typeof(this[prop].valueHasMutated) === 'function')
            this[prop].valueHasMutated();        
;

Fiddle

【讨论】：

你救了我的命，我真的很困惑这个答案没有那么多的赞成票，它应该像火箭天空一样被赞成。