Knockout Computed Observables

by Jakub Jedryszek

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<div class="body">
    <div>
        <label for="fname">First Name:</label>
        <input id="fname" data-bind="value: firstName" />
    </div>
    <div>
        <label for="lname">Last Name:</label>
        <input id="lname" data-bind="value: lastName" />
    </div>
    <div>
        <label for="pesel">PESEL:</label>
        <input id="pesel" data-bind="value: pesel" />
    </div>
    
    <hr />
    
    <button data-bind="click: doAction">Action</button>
    
    <div>Hello <span data-bind="text: fullName" ></span><div>
</div>

CSS

label {  margin-right:5px; color: #444; font: bold 0.9em sans-serif; display:inline-block; width:100px; text-align:right; }
div { margin-bottom: 5px; }
div.body { padding: 10px; }

JavaScript

var viewModel = function() {
    var self = this;
    self.firstName = ko.observable('Joe');
    self.lastName = ko.observable('Brinkman');
    self.pesel = ko.observable('pesel');
    self.fullName = ko.computed( function() {
        console.log("recomputation");
        return self.firstName() + ' ' + self.lastName();        
    });
    self.doAction = function() {
        var ref = self.firstName();
        ref = "bla";
        console.log("observable: " + self.firstName());        
        console.log("ref: " + ref);
    }
};

ko.applyBindings(new viewModel());