当jQuery Datepicker打开时,Knockout更改会破坏Datepicker
我已经设置了一个jsFiddle来演示我的问题。
我在做什么 :
我正在使用Knockout
和jQuery
Datepicker
,如本问题所示。
我的模型包含一个observableArray
,它包含具有日期属性的对象。 Knockout为每个对象呈现 ,并使用RP Niemeyer的
datepicker
绑定将值绑定到日期。
出了什么问题:
如果用户在挖空模型更改时打开了一个日期选择器(例如,添加新项目),则datepicker将停止正常工作。 据我所知,在datepicker打开时创建的最后一个成为新的datepicker目标。 我需要修复绑定,以便不会发生这种情况 。
示例HTML :
-
示例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 1) { self.dateBoxes.splice(0,1); } } self.tick = function() { self.changeCount(); setTimeout(function() { self.tick(); }, 5000); } self.tick(); } model = new Model(); ko.applyBindings(model);
注意:此答案不完整。 然而,因为它太大而无法发表评论并且可能有用(对于解决方案)无论如何我已经取得了自由并将其作为答案发布。 任何能够完成此答案的人都可以通过编辑或转换成另一个更好的答案来完成。
似乎破坏党的事情(取自文件 ,强调我的):
首次将绑定应用于元素时将调用此方法,并且只要关联的observable更改值,就会再次调用此方法。
如果我在第一次更新中严重阻止update
执行其datepicker
调用,则datepicker将不再中断(尽管会出现其他问题)。 对于init
我在最后添加了这一行:
element.isFirstRun = true;
然后update
方法将在datepicker
调用之前执行以下操作:
if (element.isFirstRun) { $(element).val(value); element.IsFirstRun = false; return; }
请参阅此更新的小提琴 ,了解结果:
- 提到的场景现在更新正确的文本框(一件好事);
- 初始值现在是一个更详细的DateTime字符串,并在更新后保持这种方式(有点不好);
希望这有助于实现更完整的解决方案。