KnockoutJS を jQuery UI で使用しようとしています。日付ピッカーが添付された入力要素があります。現在実行中ですknockout.debug.1.2.1.js
が、変更イベントが Knockout によってキャッチされないようです。要素は次のようになります。
<input type="text" class="date" data-bind="value: RedemptionExpiration"/>
イベント タイプの変更も試みましたが、効果はありませんでした。Chrome では値を変更する直前にイベントvalueUpdate
が発生するようですが、IE では発生しないようです。focus
「すべてのバインディングを再バインドする」Knockout メソッドはありますか? 技術的には、サーバーに送り返す前に値を変更するだけで済みます。そのため、このような回避策で対処できます。
この問題は日付ピッカーのせいだと思うのですが、これを修正する方法がわかりません。
何か案は?
ベストアンサー1
jQuery UI 日付ピッカーの場合、日付ピッカーによって提供される API を使用して Date オブジェクトを読み書きするカスタム バインディングを使用することが望ましいと思います。
バインディングは次のようになります(私の回答からここ):
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {},
$el = $(element);
$el.datepicker(options);
//handle the field changing by registering datepicker's changeDate event
ko.utils.registerEventHandler(element, "changeDate", function () {
var observable = valueAccessor();
observable($el.datepicker("getDate"));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$el.datepicker("destroy");
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
$el = $(element);
//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 = $el.datepicker("getDate");
if (value - current !== 0) {
$el.datepicker("setDate", value);
}
}
};
次のように使用します:
<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />
jsFiddle のサンプルはこちら:http://jsfiddle.net/rniemeyer/NAgNV/