带有Jquery UI Datepicker的淘汰赛Js-“缺少该datepicker的实例数据" [英] Knockout Js with Jquery UI Datepicker - "Missing instance data for this datepicker"
问题描述
在我的视图模型中，有一个这样的日期声明为可观察的日期:
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>
这在Knockout JS模板中使用，我正尝试通过将现成的ASP.Net MVC模型绑定用于自定义对象的集合来使其美观.
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.
我正在使用以下Knockout JS自定义绑定:
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);
}
}
};
我的问题是，在Datepicker中选择一个值时，在Chrome中出现以下错误:
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
如果删除用于设置控件的ID和名称的属性绑定，则不会发生此错误.我需要能够进行设置，以便MVC模型绑定可以正确解释它.任何建议或想法都将受到欢迎.
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.
谢谢
推荐答案
我怀疑问题是当应用datepicker绑定时，尚未设置id.根据我在网上可以找到的内容，ID是日期选择器工作方式的关键，日期选择器与该ID相关联.如果它改变了，通常会导致问题.
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.
由于使用的是剔除3.1，因此可以将after属性添加到绑定处理程序中，并将attr绑定包括到列表中.这将确保在此之前首先应用列出的绑定.并应用attr绑定，届时该元素应具有一个ID.
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: ...
};
请注意，由于您的ID在您添加/删除付款时会不断更新.如果更改更改了现有控件的ID，它将分离关联的日期选择器，您将再次看到问题.
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.
这篇关于带有Jquery UI Datepicker的淘汰赛Js-“缺少该datepicker的实例数据"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
