prefilledText knockout binding

by Casey Webb

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<!-- w/ custom binding -->
<input type="text" data-bind="prefilledText: name">
    
<br>
    
<!-- w/ overwritten binding -->
<input type="text" data-bind="textInput: name">

JavaScript

// mock initial value
$('input').val('Casey Webb')

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

function ViewModel() {
    this.name = ko.observable()
}

ko.applyBindings(new ViewModel())