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

时间:2013-12-04 16:41:07

标签: 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>

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

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()));
});

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

2 个答案:

答案 0 :(得分:6)

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

创建自定义验证器功能

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

答案 1 :(得分:1)

这是一个黑暗的镜头,因为我不熟悉验证插件,但试试

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

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