Computed Observable Example

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>
<div>
    Welcome, <span data-bind="text: full_name">guest</span>!
</div>

JavaScript

var viewModel = {}
viewModel.first_name = ko.observable()
viewModel.last_name = ko.observable()
viewModel.full_name = ko.computed(function(){
    var first_name = viewModel.first_name() || "";
    var last_name = viewModel.last_name() || "";
    var full_name = first_name + " " + last_name;
    
    //Trim any white space
    full_name = full_name.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
    
    return full_name;
});

ko.applyBindings( viewModel );