使用 Jquery UI Datepicker 淘汰 Js - “缺少此日期选择器的实例数据" [英] Knockout Js with Jquery UI Datepicker - "Missing instance data for this datepicker"

问题描述

我的视图模型中有一个日期声明为可观察对象，如下所示:

self.date = ko.observable(date);

在我的标记中，我像这样声明控件:

<input class="form-control datepicker"数据绑定=日期选择器:日期，属性:{id: 'Payments_' + $index() + '_Date',名称:'付款[' + $index() + '].Date'}"数据日期格式="dd/mm/yy"数据值=真"data-val-date="日期字段必须是日期."data-val-required="日期字段是必需的./><span class="input-group-addon"><i class="fa fa-calendar"></i></span>

这是在 Knockout JS 模板中使用的，我正在尝试通过开箱即用的 ASP.Net MVC 模型绑定来使其与自定义对象集合相得益彰.

我正在使用以下 Knockout JS 自定义绑定:

ko.bindingHandlers.datepicker = {初始化:函数(元素，valueAccessor，allBindingsAccessor){//使用一些可选选项初始化日期选择器var options = allBindingsAccessor().datepickerOptions ||{ dateFormat: 'dd/mm/yy' };$(element).datepicker(options);//处理字段变化ko.utils.registerEventHandler(元素，改变"，函数(){var observable = valueAccessor();observable($(element).datepicker("getDate"));});//handle 处理(如果 KO 被模板绑定移​​除)ko.utils.domNodeDisposal.addDisposeCallback(元素，函数(){$(element).datepicker("销毁");});},//当视图模型改变时更新控件更新:函数(元素，valueAccessor){var value = ko.utils.unwrapObservable(valueAccessor()),current = $(element).datepicker("getDate");如果(值 - 当前！== 0){$(element).datepicker("setDate", value);}}};

我的问题是，当在 Datepicker 中选择一个值时，我在 Chrome 中收到以下错误:

Uncaught Missing instance data for this datepickert.extend._getInstt.extend._selectDayt.extend._attachHandlers.e.dpDiv.find.map.e.selectDayx.event.dispatch jquery.js:4692x.event.add.y.handle

如果我删除了用于设置控件的 Id 和 Name 的属性绑定，则不会发生错误.我需要能够设置它，以便 MVC 模型绑定可以正确解释它.非常欢迎任何建议或想法.

谢谢

解决方案

我怀疑问题是在应用 datepicker 绑定时，尚未设置 id.从我在网上找到的信息来看，id 是日期选择器如何工作的关键，日期选择器与 id 相关联.如果它发生变化，通常会导致问题.

由于您使用的是淘汰赛 3.1，您可以将 after 属性添加到您的绑定处理程序，并将 attr 绑定包括到列表中.这将确保在此绑定之前首先应用列出的绑定.并且应用了 attr 绑定后，到那时元素应该有一个 id.

ko.bindingHandlers.datepicker = {after: ['attr'],//添加这个在里面: ...，更新: ...};

请注意，因为您的 ID 在您添加/删除付款时会更新.如果更改更改了现有控件的 ID，它将分离关联的日期选择器，您将再次看到问题.

小提琴

I have a date declared as an observable in my view model like this:

self.date = ko.observable(date);

In my markup, I am declaring the control like this:

<div class="input-group">
    <input class="form-control datepicker" 
        data-bind="
            datepicker: date, 
            attr: { 
                id: 'Payments_' + $index() + '_Date', 
                name: 'Payments[' + $index() + '].Date'
            }
        "
        data-dateformat="dd/mm/yy" 
        data-val="true" 
        data-val-date="The field Date must be a date." 
        data-val-required="The Date field is required."
    />
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>

This is used in a Knockout JS Template and I am trying to make it place nice with the out of the box ASP.Net MVC model binding for a collection of a custom object.

I am using the following Knockout JS custom binding:

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || { dateFormat: 'dd/mm/yy' };
        $(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");
        });

    },
    //update the control when the view model changes
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

My problem is that when a value is selected in the Datepicker, I get the following error in Chrome:

Uncaught Missing instance data for this datepicker 
t.extend._getInst 
t.extend._selectDay
t.extend._attachHandlers.e.dpDiv.find.map.e.selectDay 
x.event.dispatch jquery.js:4692x.event.add.y.handle

If I remove the attribute binding for setting the Id and Name of the control then the error does not occur. I need to be able to set this though so that the MVC Model binding can interpret it correctly. Any suggestions or ideas would be very welcome.

Thanks

解决方案

I suspect the problem is that when the datepicker binding is applied, the id hasn't been set yet. And from what I could find online, the id is key to how the datepicker works, the datepicker is associated with the id. If it ever changes, it usually leads to problems.

Since you are using knockout 3.1, you can add the after property to your binding handler and include the attr binding to the list. This will ensure that the listed bindings are applied first before this one. And with the attr binding applied, the element should have an id by then.

ko.bindingHandlers.datepicker = {
    after: ['attr'], // add this
    init: ...,
    update: ...
};

Just beware that since your ids are being updated as you add/remove your payments. If a change alters the id of an existing control, it will detach the associated datepicker and you will see the problems again.

fiddle

这篇关于使用 Jquery UI Datepicker 淘汰 Js - “缺少此日期选择器的实例数据"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！