Событие изменения DatePicker пользовательского интерфейса jQuery не обнаружено KnockoutJS
Я пытаюсь использовать KnockoutJS с jQuery UI. У меня есть элемент ввода с прикрепленным DatePicker. Я сейчас бегаю knockout.debug.1.2.1.js и кажется, что событие изменения никогда не перехватывается нокаутом. Элемент выглядит так:
<input type="text" class="date" data-bind="value: RedemptionExpiration"/>
Я даже пытался изменить valueUpdate Тип события, но безрезультатно. Похоже, что Chrome вызывает focus событие как раз перед тем, как оно меняет значение, а IE нет.
Есть ли какой-нибудь метод Knockout, который "связывает все привязки"? Технически мне нужно только изменить значение, прежде чем я отправлю его обратно на сервер. Так что я мог бы жить с таким обходным путем.
Я думаю, что проблема в том, кто виноват, но я не могу понять, как это исправить.
Есть идеи?
13 ответов
Я думаю, что для средства выбора даты jQuery UI предпочтительно использовать настраиваемую привязку, которая будет читать / записывать объекты Date с использованием API, предоставляемых средством выбора даты.
Привязка может выглядеть так (из моего ответа здесь):
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/
Вот версия ответа Р. П. Нимейера, которая будет работать со сценариями проверки нокаута, найденными здесь: 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 не запускает событие при изменении, я заставил указатель даты вызывать 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);
}
}
};
Я подозреваю, что поставил наблюдаемый ($(element).datepicker("getDate")); заявление в своей собственной функции и регистрация, что с options.onSelect сделали свое дело?
Спасибо за эту статью, я нашел это очень полезным.
Если вы хотите, чтобы DatePicker вел себя точно так же, как поведение по умолчанию в пользовательском интерфейсе JQuery, я рекомендую добавить размытие на элемент в обработчике события изменения:
т.е.
//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);
}
}
Использование пользовательских привязок, представленных в предыдущих ответах, не всегда возможно. призвание $(element).datepicker(...) занимает значительное время, и если у вас есть, например, несколько десятков или даже сотен элементов для вызова этого метода, вы должны сделать его "ленивым", то есть по требованию.
Например, модель представления может быть инициализирована, inputs вставляются в DOM, но соответствующие средства выбора даты будут инициализированы только тогда, когда пользователь щелкнет по ним.
Итак, вот мое решение:
Добавьте пользовательскую привязку, которая позволяет прикрепить произвольные данные к узлу:
KO.bindingHandlers.boundData = {
init: function(element, __, allBindings) {
element.boundData = allBindings.get('boundData');
}
};
Используйте привязку к атрибуту наблюдаемого, используемого для inputзначение:
<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
});
Таким образом, каждый раз, когда пользователь изменяет дату с помощью средства выбора даты, соответствующая наблюдаемая нокаут также обновляется.
Мало кто спрашивал о динамических опциях выбора даты. В моем случае мне был нужен динамический диапазон дат - поэтому первый вход определяет минимальное значение второго, а второй устанавливает максимальное значение для первого. Я решил это, расширив обработчик 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);
}
}
};
Я добавил еще два обработчика, соответствующих опциям, которые я хотел изменить:
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" />
Основываясь на решении Райана, myDate возвращает стандартную строку даты, которая не является идеальной в моем случае. Я использовал date.js для анализа значения, чтобы он всегда возвращал нужный вам формат даты. Взгляните на этот пример.
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"));
}
}
Мне нужно было неоднократно обновлять свои данные с сервера, с которым я сталкивался, но не совсем закончил работу, чтобы поделиться своими потребностями ниже (мой формат даты / Дата (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>