Наблюдаемый нокаут и проблема с Google Chrome Auto-Fill

Question

В основном, у меня есть кнопка входа в форму входа, которая отлично работает с jQuery 1.8.3 (я пробовал 1.9.0) и наблюдаемыми Knockout 2.2.1, и привязка для включения / отключения кнопки входа.

Кнопка включения отключается, когда вычисляемая функция видит, что отсутствует имя пользователя ИЛИ пароль.

Однако проблема возникает, когда Google Chrome (24.0.1312.56 m) автоматически заполняет текстовое поле через несколько секунд после загрузки страницы. Модель представления и вычисляемая наблюдаемая не обнаруживают, когда Chrome обновляет текстовое поле, поэтому кнопка остается отключенной.

Я сделал базовый jsfiddle. Я понятия не имею, как сделать автозаполнение jsfiddle, чтобы показать эту проблему:) Вы просто должны будете доверять мне.

Javascript / ViewModel

$(document).ready(function(e) {
    var loginViewModel = function() {

        var self=this;
        self.loginName = ko.observable("");
        self.loginPass = ko.observable("");

        self.loginInfoValid = ko.computed(function() {

            if (self.loginName().length > 0 && self.loginPass().length > 0) {
                return true;
            } else {
                return false;
            }

        });

    };

    ko.applyBindings(new loginViewModel());     
});

HTML

<input type="text" data-bind="value: loginName, valueUpdate:'afterkeydown'"><br>
<input type="text" data-bind="value: loginPass, valueUpdate:'afterkeydown'"><br>
<span data-bind="text: loginName"></span><br>
<button data-bind="enable: loginInfoValid">Login</button>

jsfiddle: http://jsfiddle.net/vW6Xy/1/

Спасибо!!

Answer 1

Вы также можете

• связать change обработчик события для текстового объекта и вручную вызвать self.loginInfoValid метод или
• использование setTimeout подождать некоторое время и вручную вызвать self.loginInfoValid метод.

Если change Когда Chrom автоматически заполняет событие, это будет моим любимым решением.

Answer 2

Нашел хороший ненавязчивый способ сделать это, например:

var emailInput = $('#email');
var passwordInput = $('#password');

emailInput.on('blur', function () { passwordInput.trigger('change'); });

Поэтому, когда вы теряете фокус на вводе электронной почты / пользователя, он вызывает событие изменения на вводе пароля, что приводит к обновлению свойства пароля в модели представления.