Ko Computed observables

Demonstrates the use of computed observables

by Randy Crews

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
Enter First Name: <input data-bind="value: firstName">
Enter Last Name: <input  data-bind="value: lastName">
<hr/>
Full name:&nbsp;
<span class="smallText" data-bind="text: fullName"></span>
<hr/>
Suggested Username:&nbsp;<span data-bind="text: userName"></span>
<hr/>

CSS

body {
    font-family:Arial;
}
.smallText {
    font-size: .8em;
    font-style: italic;
}
.containerWidth {
    width:50%;
}

JavaScript

//basic KO viewmodel
function myviewmodel(first, last) {
    var self = this;
    self.firstName = ko.observable(first);
    self.lastName = ko.observable(last);
        
    self.fullName = ko.computed(function(){
        return self.firstName() + ' ' + self.lastName();
    }, self);
    
     self.userName = ko.computed(function(){
         return self.firstName().slice(0, 1).toLowerCase()  + self.lastName().toLowerCase();
    },self);
    
}
ko.applyBindings(new myviewmodel('Randy', 'Crews'));

//computed observables are read only