knockout.js and Firefox Save Passwords on login form

Question

Firefox populates a form with my username/password. This is using knockout.js to bind the input but it won't update the values on this kind of populating. Am I missing something say on a page load? When it populates and the user hits submits, the values are blank.

(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

The way that I have dealt with this in the past is to use a wrapper to the value binding that initializes the value from the element's current value.

It would look like (this one is simplified to only work with observables):

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
};

So, you would use valueWithInit instead of value. You just need to make sure that ko.applyBindings is not called before the autocomplete has been able to do its job.

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