lostfocus / onblur событие в нокаут
Я хочу выполнить событие на нокауте, наблюдаемом привязанным к input
. Эта функция должна выполняться, когда элемент управления теряет фокус, даже без ввода чего-либо. Я попытался изменить привязку события, но она не срабатывает, когда пользователь удаляется от элемента управления, ничего не вводя. Я попробовал mouseout событие, но это срабатывает только тогда, когда пользователь нажимает в другом месте формы, потеряв фокус - не совсем то, что я хочу. Я хочу, чтобы даже выстрелил, как только фокус будет удален от управление, даже с tab.
Ниже приведен код, который я использовал для событий mouseout:
<input
type="text"
id="txtFirstName"
tabindex="1"
maxlength="25"
class="txtbox"
style="width: 200px;"
data-bind="value: FirstName,
attr: {title: FirstNameErrorMessage },
css: {validationFailed: !IsValidFirstName() },
event: {mouseout: ValidateFirstName}"
/>
this.ValidateFirstName = function () {
self.IsValidFirstName(true);
self.FirstNameErrorMessage('');
if (self.FirstName() == '') {
self.IsValidFirstName(false);
self.FirstNameErrorMessage('First Name is required');
}
}
может кто-нибудь помочь пожалуйста?
6 ответов
Я думаю, что есть несколько подходов, которые вы могли бы использовать. Хорошим вариантом будет использовать ко hasfocus
привязка:http://knockoutjs.com/documentation/hasfocus-binding.html.
вы можете привязаться к логическому наблюдаемому, а затем Подписаться на него. В подписке вы можете реагировать только тогда, когда значение теперь равно false.
что-то типа:
self.FirstName = ko.observable();
self.FirstName.focused = ko.observable();
self.FirstName.focused.subscribe(function(newValue) {
if (!newValue) {
//do validation logic here and set any validation observables as necessary
}
});
связать против него, как:
data-bind="value: FirstName, hasfocus: FirstName.focused"
Я думаю, что это будет будьте хорошим вариантом, если вы хотите, чтобы он срабатывал каждый раз, когда пользователь покидает поле независимо от того, как они его покидают и независимо от того, было ли сделано изменение.
мне нравится ответ @RPNiemeyer. Тем не менее, я просто хотел отметить, что не все должно быть сделано нокаутом. Это просто инструмент, и иногда это не лучший инструмент для работы. Вы всегда просто используете прямую привязку событий, как вы всегда делали в JS, т. е.
$('#FirstName').on('blur', function () {
// do something
});
Если вам нужно на самом деле взаимодействовать с вашей моделью представления там, то вы можете просто использовать ko.dataFor
как описано в документация нокаута на событии делегация:
$('#FirstName').on('blur', function () {
var data = ko.dataFor(this);
// do something with data, i.e. data.FirstName()
});
у меня была такая же проблема, я решил ее, создав пользовательскую привязку:
ko.bindingHandlers.modifyOnFocusOut = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
$(element).blur(function() {
//Do your work
});
}
}
а затем назвал это так:
data-bind="value: FirstName, modifyOnFocusOut: FirstName"
ты пробовал event:{blur: ValidateFirstName}
это событие будет запущено, если пользователь щелкнет или "tab out" ввода.
<input
type="text"
id="txtFirstName"
tabindex="1"
maxlength="25"
class="txtbox"
style="width: 200px;"
data-bind="value: FirstName,
attr: {title: FirstNameErrorMessage},
css: {validationFailed: !IsValidFirstName()},
event: {blur: ValidateFirstName}"
здесь JSFiddle рабочий пример.
используя TypeScript, я решил его с помощью 2 пользовательских Привязок, привязки SetFocusBinding и привязки OnBlur... Используя SetFocusBinding, я убеждаюсь, что поле ввода имеет фокус. Использование привязки OnBlur функция вызывается при запуске события размытия.
module Fx.Ko.Bindings {
export class SetFocusBinding implements KnockoutBindingHandler {
public update(element, valueAccessor, allBindingsAccessor) {
var value = valueAccessor();
var valueUnwrapped = ko.unwrap(value);
if (valueUnwrapped == undefined) {
return;
}
if (valueUnwrapped)
$(element).focus();
}
}
}
и ...
module Fx.Ko.Bindings {
export class OnBlurBinding implements KnockoutBindingHandler {
public init(element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = valueAccessor();
$(element).on('blur', function (event) {
value();
});
}
}
}
interface KnockoutBindingHandlers {
onBlur: KnockoutBindingHandler;
}
ko.bindingHandlers.onBlur = new Fx.Ko.Bindings.OnBlurBinding();