<вход> потерянофокус/событие onblur в нокауте

Я хочу выполнить событие на наблюдаемом нокауте, связанном с input. Эта функция должна выполняться, когда управление теряет фокус, даже не набрав ничего. Я попытался изменить привязку события, но он не срабатывает, когда пользователь удаляется от элемента управления, не набрав ничего. Я попробовал mouseout-событие, но это срабатывает только тогда, когда пользователь щелкает в другом месте в форме, потеряв фокус - не совсем то, что я хочу. Я хочу, чтобы даже огонь срабатывал, как только фокус удаляется от элемента управления, даже с вкладкой.

Ниже приведен код, который я использовал для события 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');
    }
}

Может ли кто-нибудь помочь?

Ответ 1

Я думаю, что есть несколько подходов, которые вы могли бы использовать. Хорошим вариантом было бы использовать привязку KO hasfocus: http://knockoutjs.com/documentation/hasfocus-binding.html.

Вы можете привязываться к булевому наблюдаемому, а затем подписываться на него. В подписке вы можете реагировать только тогда, когда значение теперь ложно.

Что-то вроде:

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"

Я думаю, что это было бы хорошим вариантом, если вы хотите, чтобы он срабатывал каждый раз, когда пользователь покидал поле, независимо от того, как он его покидает, и независимо от того, было ли действительно сделано изменение.

Ответ 2

Мне нравится @RPNiemeyer ответ. Тем не менее, я просто хотел указать, что не все должно быть сделано через Knockout. Это просто инструмент, и иногда это не лучший инструмент для работы. Вы всегда используете прямую привязку событий, как всегда, в 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()
});

Ответ 3

Это сработало для меня:

data-bind="event: { blur: OnBlurEvent }"

Ответ 4

У меня была такая же проблема, она была решена путем создания пользовательской привязки:

ko.bindingHandlers.modifyOnFocusOut = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $(element).blur(function() {
            //Do your work
        });
    }
}

И затем называет это следующим образом:

 data-bind="value: FirstName, modifyOnFocusOut: FirstName"

Ответ 5

Вы пробовали event:{blur: ValidateFirstName}, это событие будет запущено, если пользователь щелкнет или "выйдет" из ввода.

<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 рабочего примера.

Ответ 6

Используя 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();