如何将淘汰赛验证附加到自定义绑定答案

【问题标题】：How To Attach Knockout Validation To A Custom Binding如何将淘汰赛验证附加到自定义绑定
【发布时间】：2015-06-25 00:01:17
【问题描述】：

我创建了一个 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'" />

我从网上找到的代码创建了一个自定义验证规则。

// http://stackoverflow.com/a/23086828/139917
// 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 绑定。

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

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

【问题讨论】：

标签： javascript knockout.js knockout-validation

【解决方案1】：

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

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

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

【讨论】：

如果输入的值验证失败会怎样？我可以点击敲除验证以显示错误标签吗？如何将其添加到调用 var errors = ko.validation.group(selectedEntry, { deep: false }); 时创建的错误数组中？

【解决方案2】：

这是我解决问题的方法。我在我的实体上创建了一个读/写计算属性，并使用 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 的自定义绑定处理程序。

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

欢迎直接回答问题。

【讨论】：

【解决方案3】：

我得到它的工作如下 -

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

【讨论】：