KnockoutJSでキャッチされないjQuery UIのdatepicker変更イベント
KnockoutJSをjQuery UIで使用しようとしています。 datepickerが添付されたinput要素があります。現在knockout.debug.1.2.1.jsを実行していますが、変更イベントがKnockoutによってキャッチされることはありません。要素は次のようになります。
<input type="text" class="date" data-bind="value: RedemptionExpiration"/>
私はvalueUpdateイベントタイプを変更しようとしましたが、役に立ちませんでした。 Chromeは、値を変更する直前にfocusイベントを発生させますが、IEは発生させないようです。
「すべてのバインディングを再バインドする」Knockoutメソッドはありますか？技術的には、サーバーに送信する前に値を変更するだけです。だから、私はそのような回避策で生きることができました。
問題は日付ピッカーのせいだと思いますが、これを修正する方法がわかりません。
何か案は？
JQuery UIのdatepickerでは、datepickerが提供する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/
ここにあるRP Niemeyerの答えのバージョンは、ここにあるノックアウト検証スクリプトで動作します： http://github.com/ericmbarnard/Knockout-Validation
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).val());
if (observable.isValid()) {
observable($(element).datepicker("getDate"));
$(element).blur();
}
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).datepicker("destroy");
});
ko.bindingHandlers.validationCore.init(element, valueAccessor, allBindingsAccessor);
},
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")));
}
current = $(element).datepicker("getDate");
if (value - current !== 0) {
$(element).datepicker("setDate", value);
}
}
};
変更は、入力された値ではなく入力された値を最初に検証スクリプトに渡す変更イベントハンドラーへの変更であり、有効な場合にのみ監視可能に日付を設定します。ここで説明したカスタムバインディングに必要なvalidationCore.initも追加しました。
http://github.com/ericmbarnard/Knockout-Validation/issues/69
また、物事の邪魔になる厄介な日付ピッカーのシナリオを排除するために、変更のぼかしに関するrpenroseの提案を追加しました。
別のアプローチを使用しました。 knockout.jsは変更時にイベントを発生させないため、datepickerが閉じられた入力に対してchange（）を呼び出すように強制しました。
$(".date").datepicker({
onClose: function() {
$(this).change(); // Forces re-validation
}
});
これらの答えはすべて私に多くの仕事を節約しましたが、どれも私のために完全に機能しませんでした。日付を選択した後、バインドされた値は更新されません。キーボードを使用して日付値を変更し、入力ボックスの外をクリックした場合にのみ更新できました。これを修正するには、RP Niemeyerのコードにsybのコードを追加して、以下を取得します。
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
var funcOnSelectdate = function () {
var observable = valueAccessor();
observable($(element).datepicker("getDate"));
}
options.onSelect = funcOnSelectdate;
$(element).datepicker(options);
//handle the field changing
ko.utils.registerEventHandler(element, "change", funcOnSelectdate);
//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());
if (typeof(value) === "string") { // JSON string from server
value = value.split("T")[0]; // Removes time
}
var current = $(element).datepicker("getDate");
if (value - current !== 0) {
var parsedDate = $.datepicker.parseDate('yy-mm-dd', value);
$(element).datepicker("setDate", parsedDate);
}
}
};
Observable（$（element）.datepicker（ "getDate"））;独自の関数内のステートメントとoptions.onSelectでそれを登録するトリックは？
この記事をありがとう、私はそれが非常に便利だと感じました。
DatePickerをJQuery UIのデフォルトの動作とまったく同じように動作させたい場合は、changeイベントハンドラーの要素にぼかしを追加することをお勧めします。
つまり.
//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).datepicker("getDate"));
$(element).blur();
});
含まれているスクリプトファイルの順序を変更して、この問題を解決しました。
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.custom.js")"></script>
<script src="@Url.Content("~/Scripts/knockout-2.2.1.js")"></script>
RP Niemeyerと同じですが、WCF DateTime、Timezones、DatePicker onSelect JQueryプロパティの使用のサポートが向上しています。
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
var funcOnSelectdate = function () {
var observable = valueAccessor();
var d = $(element).datepicker("getDate");
var timeInTicks = d.getTime() + (-1 * (d.getTimezoneOffset() * 60 * 1000));
observable("/Date(" + timeInTicks + ")/");
}
options.onSelect = funcOnSelectdate;
$(element).datepicker(options);
//handle the field changing
ko.utils.registerEventHandler(element, "change", funcOnSelectdate);
//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")));
}
current = $(element).datepicker("getDate");
if (value - current !== 0) {
$(element).datepicker("setDate", value);
}
}
};
楽しい ：）
私はそれがはるかに簡単にできると思います：<input data-bind="value: myDate, datepicker: myDate, datepickerOptions: {}" />
したがって、init関数で手動で変更を処理する必要はありません。
ただし、この場合、「myDate」変数は、Dateオブジェクトではなく、可視値のみを取得します。
あるいは、バインディングでこれを指定できます。
更新：
function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).datepicker("getDate");
if (typeof value === "string") {
var dateValue = new Date(value);
if (dateValue - current !== 0)
$(element).datepicker("setDate", dateValue);
}
}
サーバーからのデータを繰り返し更新する必要がありましたが、以下の共有のニーズのために仕事を完了しませんでした（私の日付形式/日付（1224043200000）/）：
//Object Model
function Document(data) {
if (String(data.RedemptionExpiration).indexOf('/Date(') == 0) {
var newDate = new Date(parseInt(data.BDate.replace(/\/Date\((.*?)\)\//gi, "$1")));
data.RedemptionExpiration = (newDate.getMonth()+1) +
"/" + newDate.getDate() +
"/" + newDate.getFullYear();
}
this.RedemptionExpiration = ko.observable(data.RedemptionExpiration);
}
//View Model
function DocumentViewModel(){
///additional code removed
self.afterRenderLogic = function (elements) {
$("#documentsContainer .datepicker").each(function () {
$(this).datepicker();
});
};
}
モデルが出力用に正しくフォーマットされた後、ドキュメント knockoutjs を含むテンプレートを追加しました：
<div id="documentsContainer">
<div data-bind="template: { name: 'document-template', foreach: documents, afterRender: afterRenderLogic }, visible: documents().length > 0"></div>
</div>
//Inline template
<script type="text/html" id="document-template">
<input data-bind="value: RedemptionExpiration" class="datepicker" />
</script>
以前の回答で提供されたカスタムバインディングを使用することは常に可能ではありません。 $(element).datepicker(...)の呼び出しにはかなりの時間がかかります。たとえば、このメソッドを呼び出すために数十、または数百の要素がある場合、「遅延」、つまりオンデマンドで実行する必要があります。
たとえば、ビューモデルは初期化され、inputsはDOMに挿入されますが、対応する日付ピッカーはユーザーがクリックしたときにのみ初期化されます。
だから、ここに私の解決策があります：
ノードに任意のデータを添付できるカスタムバインディングを追加します。
KO.bindingHandlers.boundData = {
init: function(element, __, allBindings) {
element.boundData = allBindings.get('boundData');
}
};
バインディングを使用して、inputの値に使用されるオブザーバブルをattcahします。
<input type='text' class='my-date-input'
data-bind='textInput: myObservable, boundData: myObservable' />
最後に、datepickerを初期化するときに、onSelectオプションを使用します。
$('.my-date-input').datepicker({
onSelect: function(dateText) {
this.myObservable(dateText);
}
//Other options
});
この方法では、ユーザーが日付ピッカーで日付を変更するたびに、対応するノックアウトのオブザーバブルも更新されます。
Ryanのソリューションに基づいて、myDateは標準の日付文字列を返しますが、これは私の場合には理想的な日付文字列ではありません。 date.jsを使用して値を解析し、必要な日付形式が常に返されるようにしました。この例を見てください fiddle Example 。
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).datepicker("getDate");
var d = Date.parse(value);
if (value - current !== 0) {
$(element).datepicker("setDate", d.toString("MM/dd/yyyy"));
}
}
動的な日付ピッカーオプションを求めた人はほとんどいませんでした。私の場合、動的な日付範囲が必要でした。したがって、最初の入力は2番目の最小値を定義し、2番目は1番目の最大値を設定します。 RP Niemeyerのハンドラーを拡張することで解決しました。だから彼のオリジナルに：
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, "change", 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);
}
}
};
変更したいオプションに対応する2つのハンドラーを追加しました。
ko.bindingHandlers.minDate = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).datepicker("option", "minDate", value);
}
};
ko.bindingHandlers.maxDate = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).datepicker("option", "maxDate", value);
}
};
そして、私のテンプレートでそのように使用しました：
<input data-bind="datepicker: selectedLowerValue, datepickerOptions: { minDate: minValue()}, maxDate: selectedUpperValue" />
<input data-bind="datepicker: selectedUpperValue, datepickerOptions: { maxDate: maxValue()}, minDate: selectedLowerValue" />