Question

我在我的视图模型中声明了一个可观察的日期，如下所示：

self.date = ko.observable(date);

在我的标记中，我正在声明这样的控件：

<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模型绑定自定义对象的集合。

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

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中收到以下错误：

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和Name，则不会发生错误。我需要能够设置它，以便MVC模型绑定可以正确解释它。任何建议或想法都会非常受欢迎。

由于

Answer 1

我怀疑问题是当应用datepicker绑定时，id尚未设置。根据我在网上找到的内容，id是datepicker如何工作的关键，datepicker与id相关联。如果它发生变化，通常会导致问题。

由于您使用的是knockout 3.1，因此可以将after属性添加到绑定处理程序中，并将attr绑定包含在列表中。这将确保在此之前首先应用列出的绑定。并且应用了attr绑定后，该元素应该具有id。

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

请注意，因为您在添加/删除付款时更新了ID。如果更改改变了现有控件的id，它将分离关联的datepicker，您将再次看到问题。

fiddle

使用Jquery UI Datepicker敲除Js - “缺少此datepicker的实例数据”

1 个答案: