knockout.js и Firefox Сохранить пароли в форме входа

Question

Firefox заполняет форму с моим именем пользователя / паролем. Это использует knockout.js для привязки ввода, но он не будет обновлять значения в этом виде заполнения. Я что-то пропускаю при загрузке страницы? Когда он заполняется и пользователь нажимает кнопку «Отправить», значения остаются пустыми.

(function (app, $, undefined) {

    app.viewModel = app.viewModel || {};
    app.login = {};

    app.viewModel.login = {
        userName: ko.observable(''),
        password: ko.observable(''),
        returnUrl: ''
    };

    app.viewModel.login.submit = function () {
        sso.login(app.viewModel.login.userName(), app.viewModel.login.password(), app.viewModel.login.returnUrl);
    };

    app.login.init = function (returnUrl) {

        app.viewModel.login.returnUrl = returnUrl;

        ko.applyBindings(app.viewModel);
    };

})(window.app = window.app || {}, jQuery);

Answer 1

То, как я справлялся с этим в прошлом, - это использование обертки для привязки value, которая инициализирует значение из текущего значения элемента.работать только с наблюдаемыми):

ko.bindingHandlers.valueWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
        var observable = valueAccessor();
        var value = element.value;

        observable(value);   

        ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, context);
    },
    update: ko.bindingHandlers.value.update
};

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

http://jsfiddle.net/rniemeyer/TeFAX/

Answer 2

Я нашел решение здесь не очень удовлетворительным. Хотя этот подход довольно интересен, он терпит неудачу, когда пользователь выбирает учетную запись позже, и браузер действительно позволяет использовать сохраненные учетные данные (например, если хранится более одной учетной записи). Это также не удалось, когда вы начали вводить пароль и удалили, чтобы вернуться к исходному паролю (по крайней мере, в Firefox). Кроме того, мне не очень понравился тайм-аут, чтобы дать браузеру время - просто не так приятно.

Мое решение: что на самом деле не одно, но я все же поделился

Просто обновите нашу модель вручную, прежде чем выполнять вход в систему с помощью функции обратного вызова. Используя jQuery, что-то вроде self.password($("#password").val()) должно сделать это.

В качестве альтернативы, используя существующие привязки, кажется, что запуск события изменения также работает - например, $("#password").change().

Плюсы:

• только для учетных полей, так что, вероятно, один раз для вашего сайта
• просто и чисто - одна или две строки в нужном месте
• , кажется, всегда работает надежно, независимо от того, какой браузер, настройка учетных данных или шаблон использования

Минусы:

• снова ломает красивое разделение, которое предоставляет Knockout.js
• это не решение, а обходной путь

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

Просто подумав немного - та же проблема должна возникнуть, когда браузер автоматически завершает любую форму (например, как адрес) - это означает, что какая-то общая функция, выполняющая вышеописанное, была бы хороша (возможно, вызов триггера изменения каждое поле ввода формы)

Edit: Небольшой быстрый код, демонстрирующий идею

HTML:

<form id="myForm" data-bind="submit: login">
    Email: <input type="text" data-bind="value: email" /><br/>
    Password: <input type="password" data-bind="value: password" /><br/>
    <button type="submit">Login</button>
</form>

И Javascript:

function ViewModel() {
    var self = this;

    self.email = ko.observable("");
    self.password = ko.observable("");

    self.login = function() {
        $("#myForm").find("input").change();

        //Now the observables contain the recent data
        alert(ko.mapping.toJSON(self));
    };
}