具有可观察参数的淘汰赛自定义验证答案

【问题标题】：Knockout Custom Validation with an observable parameter具有可观察参数的淘汰赛自定义验证
【发布时间】：2013-12-21 06:30:36
【问题描述】：

我有一种情况需要验证我的视图模型中的字段的最大数量。但是，最大数量必须是可变的，并且根据在此模型之外选择的 UI 项目进行计算。我试图将 observable 作为参数包含在我的自定义验证器中，但是当值更改时它似乎没有更新。

我有一种感觉，一旦验证代码第一次执行，它就会保留参数。

未使用 Knockout 的列表的 HTML

<select id="ContentsReplacementAmount">
    <option value="25000">£25000</option>
    <option value="50000">£50000</option>
    <option value="75000">£75000</option>
</select>

这是我正在使用的代码的简化版本。

var SpecifiedValuablesViewModel = function (maxSpecifiedItemAmount) {
    var self = this;

    self.maxSpecifiedItemAmount = ko.observable(maxSpecifiedItemAmount);

    self.amountToAdd = ko.observable().extend({
        validation: {
            validator: function (val, max) {
                return val <= max;
            },
            message: 'The amount must be a maximum of £{0}',
            params: self.maxSpecifiedItemAmount()
        }
    });
};

var specifiedValuablesViewModel = new SpecifiedValuablesViewModel($('#ContentsReplacementAmount').val());
ko.applyBindings(ko.validatedObservable(specifiedValuablesViewModel), document.getElementById('SpecifiedValuables'));

maxSpecifiedAmount 之外的事件

$('#ContentsReplacementAmount').on('change', function () {
    specifiedValuablesViewModel.maxSpecifiedItemAmount(parseInt($(this).val()));
});

我的问题是，我怎样才能做到这一点？

【问题讨论】：

通常我会在 $(asdf).val() 中得到一个数字的字符串表示形式，通常 === 或
它的类型在这个例子中是一个字符串，但在我的应用程序中不是。它只是不会改变。还有其他想法吗？我会更新上面的代码

标签： javascript validation knockout.js knockout-validation

【解决方案1】：

我现在已经设法使用以下代码解决了这个问题：

创建自定义验证器函数

var customMax = function(val, max) {
    return val <= max();
};

通过验证函数并将消息包装在一个函数中

var SpecifiedValuablesViewModel  = function (maxSpecifiedItemAmount) {
    var self = this;

    self.maxSpecifiedItemAmount = ko.observable(maxSpecifiedItemAmount);

    self.amountToAdd = ko.observable().extend({
        validation: {
            validator: customMax,
            message: function () { return 'The maximum allowed is ' + self.maxSpecifiedItemAmount(); },
            params: self.maxSpecifiedItemAmount
        }
    });

    self.maxSpecifiedItemAmount.subscribe(function (amount) {
        self.amountToAdd.isModified(false);
    });
};

var specifiedValuablesViewModel = new SpecifiedValuablesViewModel($('#ContentsReplacementAmount').val());
ko.applyBindings(ko.validatedObservable(specifiedValuablesViewModel), document.getElementById('SpecifiedValuables'));

$('#ContentsReplacementAmount').on('change', function () {
    specifiedValuablesViewModel.maxSpecifiedItemAmount(parseInt($(this).val()));
});

JSFiddle example

【讨论】：

【解决方案2】：

这是在黑暗中拍摄的，因为我对验证插件不是很熟悉，但试试

    validation: {
        validator: function (val, max) {
            return val <= max();
        },
        message: 'The amount must be a maximum of £{0}',
        params: self.maxSpecifiedItemAmount
    }

这样，您将 observable 本身而不是其值作为验证参数传递，并在调用验证器函数时而不是在定义规则时对其进行评估。

【讨论】：

如果我这样做，它会在self.maxSpecifiedItemAmount 更改后清除它的值，我认为验证会清除它