JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div data-bind="with: person">
    
    <input type="text" name="firstName" data-bind="value: firstName, valueUpdate: 'keyup'" />
    
    <input type="text" name="lastName" data-bind="value: lastName, valueUpdate: 'keyup'" />
    
    <p>Your name is :<b data-bind="text: fullName"></b></p>
    
    <button data-bind="click: $root.sayName">Say Name</button>
    
</div>

JavaScript

var Person = function () {
    // use this technique to prevent 'this' issue in JS
    var self = this;
    self.firstName = ko.observable('');
    self.lastName = ko.observable('');
    self.fullName = ko.computed(function () {
        return this.firstName() + ' ' + this.lastName();
    }, self);
}




var ViewModel = function () {
    var self = this;
    self.person = ko.observable(new Person());
    self.sayName = function () {
        alert(self.person().fullName());
    };
}

ko.applyBindings(new ViewModel);