Trying out extensions of textInput

by ozzymcduff

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<p>Name: <input type="text" data-bind='xtextInput: {value:firstName}' /></p> 
<p>Name: <input type="text" data-bind='xtextInput: {value:lastName}' /></p> 
<p>FullName: <strong data-bind='text: fullName()' ></strong> 
    <br/>
ViewModel:
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

CSS

body { font-family: arial; font-size: 14px; }
p { margin: 0.9em;  }

JavaScript

// Here's my data model
var viewModel = {
    firstName: ko.observable("Sky"),
    lastName: ko.observable("King"),
};

viewModel.fullName = function() {
// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
    return viewModel.firstName() + " " + viewModel.lastName();
};
var originalTextInputInit = ko.bindingHandlers.textInput.init;
ko.bindingHandlers.xtextInput = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        
        originalTextInputInit(
            element,
            function () {
                var value = valueAccessor();
                return value.value;
            },
            allBindings,
            viewModel,
            bindingContext);
    }
};


// This makes Knockout get to work
ko.applyBindings(viewModel);