Knockout Playground

by Jakub Jedryszek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.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 />
    
    <div>Hello <span data-bind="text: fullName" ></span><div>
        
    <hr />
    <a href="#" data-bind="text: link, click: toggleAmPm"></a>
</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.link = ko.observable('AM');
    self.toggleAmPm = function () {
        self.link(self.link() === 'AM' ? 'PM' : 'AM');        
    };
};

ko.applyBindings(new viewModel());