敲除验证不适用于 DatePicker bindingHandler答案

【问题标题】：Knockout Validation not working with a DatePicker bindingHandler敲除验证不适用于 DatePicker bindingHandler
【发布时间】：2015-08-03 06:04:30
【问题描述】：

所以我使用Knockout Validation 来验证我的视图模型和一个自定义的淘汰日期选择器 bindingHandler 来将一个 jQuery-UI 日期选择器附加到我的 observableArray 中动态添加的项目。

似乎我的 bindingHandler 正在破坏或破坏该字段的验证规则。开始或结束日期的验证规则似乎都没有得到执行。

JSFiddle Link of my code

HTML 代码：

<form>
    <a class="btn btn-default" data-bind="click: function () { $root.addMed(); }">Add New Medication</a>

    <h6 data-bind="visible: patientMeds().length < 1">No medications entered.</h6>

    <table class="table table-condensed" data-bind="visible: patientMeds().length > 0">
        <thead>
            <tr>
                <th>Med</th>
                <th>From</th>
                <th>To</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: patientMeds">
            <tr>
                <td>
                    <input class="form-control" data-bind="value: MedicationID" />
                </td>
                <td>
                    <input class="form-control" data-bind="datepicker: StartDate, datepickerOptions: { changeMonth: true, changeYear: true, showButtonPanel: true }" />
                </td>
                <td>
                    <input class="form-control" data-bind="datepicker: DiscontinuedDate, datepickerOptions: { changeMonth: true, changeYear: true, showButtonPanel: true }" />
                </td>
                <td>
                    <button class="btn btn-default" data-bind="click: $parent.removeMed">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>

Javascript/ViewModel 代码：

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};

        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

    }
};

function PatientMedication(p) {
    var self = this;
    p = p || {};

    self.MedicationID = ko.observable(p.MedicationID || 1)
        .extend({
        required: {
            params: true,
            message: 'Please enter a medication'
        },
        number: true
    });
    self.StartDate = ko.observable(p.StartDate).extend({
        required: {
            params: true,
            message: 'Please enter a date'
        },
        date: true
    });

    self.DiscontinuedDate = ko.observable(p.DiscontinuedDate || '').extend({
        required: {
            params: true,
            message: 'Please enter a date'
        },
        date: true
    });
}

function MedicationViewModel() {
    var self = this;

    self.patientMeds = ko.observableArray([]);

    self.addMed = function () {
        self.patientMeds.unshift(new PatientMedication());
    };

    self.removeMed = function (med) {
        self.patientMeds.remove(med)
    };
};

var medvm = new MedicationViewModel();
ko.applyBindings(medvm);

【问题讨论】：

标签： javascript jquery-ui knockout.js knockout-2.0 knockout-validation

【解决方案1】：

验证插件仅挂钩到 value、checked、textinput 和 selectedOptions 绑定。

如果您想让自定义绑定触发验证，您需要调用插件的validation.makeBindingHandlerValidatable 方法并传入自定义绑定的名称：

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //...
    }
};
ko.validation.makeBindingHandlerValidatable('datepicker');

演示JSFiddle.

【讨论】：