Writeable Computed Observable and Virtual Bindings Example

by stoodder

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div>
    <label>Please enter your first name:</label>
    <input type="text" data-bind="value: first_name" />
</div>
<div>
    <label>Please enter your last name:</label>
    <input type="text" data-bind="value: last_name" />
</div>
- or -
<div>
    <label>Enter your Full Name:</label>
    <input type="text" data-bind="value: full_name" />
</div>
<hr />
<!-- ko if: full_name -->
    Welcome, <!-- ko text: full_name --><!-- /ko -->!
<!-- /ko -->

JavaScript

//Helper method to trim whitespace
var trim = function(str) {
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
};

var viewModel = {}
viewModel.first_name = ko.observable()
viewModel.last_name = ko.observable()
viewModel.full_name = ko.computed({
    read: function(){
        var first_name = viewModel.first_name() || "";
        var last_name = viewModel.last_name() || "";
        var full_name = first_name + " " + last_name;
        
        full_name = trim( full_name )
        
        return full_name;
    },
    
    write: function( value ) {
        value = value || "";
        
        //Split up the name
        var pieces = value.split(" ", 2);
        var first_name = trim( pieces[0] || "" );
        var last_name = trim( pieces[1] || "" );
           
        //Update the observable values
        viewModel.first_name( first_name );
        viewModel.last_name( last_name );
    }
});

ko.applyBindings( viewModel );