如何防止 knockout.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

您可以使用自定义绑定，或 overwrite/extend textInput and/or 值绑定来使用 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
}

还有一个fiddle!

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

How to prevent knockout.js from deleting form field values prefilled by FireFox when applying bindings

html

javascript

forms

firefox

knockout.js