如何将敲除验证附加到自定义绑定

Question

我创建了一个 Knockout 自定义绑定以使用 moment.js 格式化日期。

ko.bindingHandlers.dateStringValue = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor(),
        allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);

        if (valueUnwrapped === null) {
            ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, viewModel);
            $(element).val("");
        } else {
            ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, viewModel);
            var pattern = allBindings.datePattern || "MM/DD/YYYY";
            $(element).val(moment(valueUnwrapped).format(pattern));
        }
    }
};

这对我的绑定非常有用：

<input type="text" data-bind="dateStringValue: entryDate, datePattern: 'M/D/YYYY'" />

我根据在网上找到的代码创建了自定义验证规则。

// 
// Use: var someDate= ko.observable().extend({ simpleDate: true });
// Dependencies: date.js
ko.validation.rules['simpleDate'] = {
    validator: function (val, validate) {
        var d = Date.parse(val);
        return (d != null);
        //return ko.validation.utils.isEmptyVal(val) || moment(val, 'MM/DD/YYYY').isValid();
    },
    message: 'Invalid date entry date'
};

ko.validation.registerExtenders();

我尝试了 moment.js 和 date.js 日期库。

我将自定义验证规则附加到我的 viewmodel observable。

self.entryDate = ko.observable(je.entryDate || new Date()).extend({ simpleDate: true });

现在我想使用 Knockout Validation 来验证输入，但不知道如何让验证框架知道我的新绑定。似乎 Knockout Validation 只知道一些或所有内置的 Knockout 绑定。

调用 ko.validation.makeBindingHandlerValidatable("dateStringValue"); 会在 Knockout v3.2.0 中引发 0x800a138f - JavaScript runtime error: Object expected 错误。有人建议从我的自定义绑定调用 Knockout 值绑定会起作用，但像 ko.bindingHandlers.value.update(element, valueAccessor); 这样的代码对我不起作用。

如何让 Knockout Validation 知道我的自定义绑定？

Answer 1

通过将新参数传递给您的绑定，在您的自定义绑定中创建您的验证，即：

<input type="text" data-bind="customDate: { value: entryDate, pattern: 'M/D/YYYY'", validatable: true } />

只需在绑定中施展魔法即可。

Answer 2

这是我解决问题的方法。我在我的实体上创建了一个 read/write 计算属性并使用 moment.js 来验证输入：

var dateFormatString = "M/D/YYYY"

self.entryDate = ko.observable(je.entryDate || new Date());
self.formattedEntryDate = ko.computed({
    read: function () {
        return moment(self.entryDate()).format(dateFormatString);
    },
    write: function (value) {
        var momentDate = moment(value, dateFormatString);
        if (momentDate.isValid()) {
            self.entryDate(momentDate.format(dateFormatString));
            self.isValidEntryDate(true);
            return;
        }
        self.isValidEntryDate(false);
    },
    owner: self
});
self.isValidEntryDate = ko.observable(true);

如果输入字符串不是预期的格式，我会将 isValidEntryDate observable 设置为 false，这会向用户显示一条消息，提示他们重新输入日期。

<input type="text" data-bind="value: formattedEntryDate" />
<div class="validationMessage" data-bind="hidden: isValidEntryDate">Invalid entry date. Use M/D/YYYY format.</div>

此绑定使用 hidden 的自定义绑定处理程序。

我意识到这并没有解决问题，但以生产力的名义，这实现了目标。

欢迎直接回答问题。

Answer 3

我让它像下面一样工作 -

<input type="text" data-bind="dateStringValue: entryDate.extend({ simpleDate: entryDate()}), datePattern: 'M/D/YYYY'" />

如何将敲除验证附加到自定义绑定

How To Attach Knockout Validation To A Custom Binding

javascript

knockout.js

knockout-validation