如何防止挖空.js在应用绑定时删除 FireFox 预先填充的表单字段值

Question

FireFox 在加载页面后在输入框中预填充某些表单值（例如用户名等）。

如果我将 Knockout.js 绑定应用于预填充表单，则在应用绑定时，Knockout 将清除输入字段（导致短暂闪烁）。

有没有办法保留预填充的值而不是擦除它们？

   var UserModel = function() {
        this.username = ko.observable();
        this.password = ko.observable();
        this.passwordRepeat = ko.observable();
        ....
   }
   ....
   domReady(function() {
      //values prefilled by FireFox in input box bound to username are 
      //erased after applyBindings is executed
      ko.applyBindings(new UserModel());
   });

Answer 1

您可以使用自定义绑定，或覆盖/扩展文本输入和/或值绑定，以使用 DOM 中的值初始化可观察量。

// w/ custom binding
ko.bindingHandlers.prefilledText = {
    init: function(el, valueAccessor) {
        // set initial value
        var initVal = $(el).val()
        valueAccessor()(initVal)
        // apply normal textInput binding
        ko.applyBindingsToNode(el, {
            textInput: valueAccessor()
        })
    }
}
// w/ extended textInput binding
// save reference to initial binding
var _textInputBinding = ko.bindingHandlers.textInput
ko.bindingHandlers.textInput = {
    init: function(el, valueAccessor) {
        // set initial value, same as before
        var initVal = $(el).val()
        valueAccessor()(initVal)
        // pass on to the regular textInput binding
        _textInputBinding.init.apply(this, arguments)
    },
    // don't forget the update function either!
    update: _textInputBinding.update
}

还有小提琴！