2

我已经设置了一个jsFiddle来演示我的问题。

我在做什么：

我正在使用Knockouta jQuery Datepicker，如this question所示。

我的模型包含一个observableArray包含具有日期属性的对象。Knockout<input type="text">为每个对象呈现一个，并使用 RP Niemeyer 的datepicker绑定将值绑定到日期。

出了什么问题：

如果用户在敲除模型更改时打开了日期选择器（例如，添加新项目），则日期选择器将停止正常工作。据我所知，<input type="text">日期选择器打开时创建的最后一个成为新的日期选择器目标。我需要修复绑定，以免发生这种情况。

示例 HTML：

<ul data-bind="foreach: dateBoxes">
    <li>
        <span data-bind="text: index"></span>
        <input type="text" data-bind="datepicker: date"/>
    </li>
</ul>

示例 Javascript：

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

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $(element).datepicker("getDate");

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

var model;
var id = 0;
function DateBox(d) {
    var self = this;
    self.date = ko.observable(d);
    self.index = ko.observable(id++);
}
function Model() {
    var self = this;
    self.dateBoxes = ko.observableArray([]);

    self.changeCount = function() {
        if (self.dateBoxes().length < 2) {
            self.dateBoxes.push(new DateBox(new Date()));
        } else if (self.dateBoxes().length > 1) {
            self.dateBoxes.splice(0,1);
        }
    }
    self.tick = function() {
        self.changeCount();
        setTimeout(function() {
            self.tick();
        }, 5000);
    }
    self.tick();
}
model = new Model();
ko.applyBindings(model);
4

1 回答 1

1

注意：此答案不完整。但是，由于它对于评论来说太大并且可能有帮助（对解决方案）无论如何我已经冒昧并将其发布为答案。任何可以完成此答案的人都被邀请通过编辑或转为另一个更好的答案来完成。

似乎破坏聚会的事情（取自文档，强调我的）：

这将在绑定首次应用于元素时调用一次，并且在关联的 observable 更改值时再次调用。

如果我 hackisly 阻止在第一次update更新中进行datepicker调用，则datepicker 将不再中断（尽管确实会出现其他问题）。对于我在最后添加了这一行：init

element.isFirstRun = true;

然后该方法将在调用update之前执行以下操作：datepicker

if (element.isFirstRun) {
    $(element).val(value);
    element.IsFirstRun = false;
    return;
}

有关结果，请参阅此更新的小提琴，它们是：

  • 提到的场景现在更新了正确的文本框（一件好事）；
  • 初始值现在是一个更详细的 DateTime 字符串，并在更新后保持这种状态（有点不好）；

希望这将有助于实现更完整的解决方案。

于 2013-09-04T21:05:37.233 回答