私の問題を示すためにjsFiddleをセットアップしました。
私がやっていること:
私はこの質問に示されているように使用Knockout
しています。jQuery
Datepicker
私のモデルには、observableArray
日付プロパティを持つオブジェクトを含む が含まれています。Knockout は<input type="text">
for every オブジェクトをレンダリングし、RP Niemeyer のdatepicker
バインディングを使用して値を日付にバインドします。
何が問題なのですか:
ノックアウトのモデルが変更されたとき (新しいアイテムの追加など)、ユーザーが日付ピッカーを開いた場合、日付ピッカーは正しく機能しなくなります。<input type="text">
私が知る限り、datepicker が開いている間に最後に作成されたものが、新しい datepicker ターゲットになります。これが起こらないようにバインディングを修正する必要があります。
サンプル 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);