使用可观察参数进行Knockout Custom Validation

Sto*_*out 6 javascript validation knockout.js knockout-validation

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

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

没有使用Knockout的列表的HTML

<select id="ContentsReplacementAmount">
    <option value="25000">£25000</option>
    <option value="50000">£50000</option>
    <option value="75000">£75000</option>
</select>
Run Code Online (Sandbox Code Playgroud)

这是我正在使用的代码的笨拙版本.

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'));
Run Code Online (Sandbox Code Playgroud)

maxSpecifiedAmount之外的事件

$('#ContentsReplacementAmount').on('change', function () {
    specifiedValuablesViewModel.maxSpecifiedItemAmount(parseInt($(this).val()));
});
Run Code Online (Sandbox Code Playgroud)

我的问题是,我怎样才能做到这一点?

Sto*_*out 6

我现在设法使用以下代码解决这个问题:

创建自定义验证器功能

var customMax = function(val, max) {
    return val <= max();
};
Run Code Online (Sandbox Code Playgroud)

传递验证函数并将消息包装在函数中

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()));
});
Run Code Online (Sandbox Code Playgroud)

JSFiddle示例