JSFiddle - React, Tailwind, and code Playground

by Tomas Kirda

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.debug.js"></script>
<script src="http://dbcms.s3.amazonaws.com/js/knockout-es5.min.js"></script>
observableSection
<div id="observableSection">
    <span data-bind="text: firstName">First Name</span>
    <span data-bind="text: lastName">Last Name</span>
    <span data-bind="text: fullName" class="full-name">Full Name</span>
</div>
    
<hr>

withoutObservableSection
<div id="withoutObservableSection">
    <span data-bind="text: firstName">First Name</span>
    <span data-bind="text: lastName">Last Name</span>
    <span data-bind="text: fullName1" class="full-name">Full Name 1</span>
    <span data-bind="text: fullName2" class="full-name">Full Name 2</span>
    <span data-bind="text: fullName3" class="full-name">Full Name 3</span>
    <span data-bind="text: fullName4" class="full-name">Full Name 4</span>
</div>

CSS

.full-name {
    margin-left:20px;
    display:block;
}

JavaScript

var NS = NS || {};

$(function () {

    NS.ViewModel1 = function (first, last) {
        var
            firstName = ko.observable(first),
            lastName = ko.observable(last),
            fullName = ko.computed(function () {
                return firstName() + " " + lastName();
            }),
            doSomething = function (n) {
                lastName(lastName() + " " + n);
            }
        ;

        return {
            firstName: firstName,
            lastName: lastName,
            fullName: fullName,
            doSomething: doSomething
        };
    };

    NS.ViewModel2 = function (first, last) {
        var
            firstName = first,
            lastName = last,
            fullName1 = ko.computed(function () {
                // Changed values are not reflected
                return firstName + " " + lastName;
            }),
            fullName2 = ko.computed(function () {
                // Should not work
                return this.firstName + " " + this.lastName;
            }),
            doSomething = function (n) {
                // Doesn't work
                lastName += " " + n;
                // Works
                // this.lastName += " " + n;
            }
        ;

        var retObj = {
            firstName: firstName,
            lastName: lastName,
            fullName1: fullName1,
            fullName2: fullName2,
            doSomething: doSomething
        };

        ko.track(retObj);
        ko.defineProperty(retObj, 'fullName3', function () {
            // Changed values are not reflected
            return firstName + " " + lastName;
        });
        ko.defineProperty(retObj, 'fullName4', function () {
            // Works
            return this.firstName + " " + this.lastName;
        });

        return retObj;
    };

    var vm1 = new NS.ViewModel1("John", "Doe");
    ko.applyBindings(vm1, document.getElementById("observableSection"));

    var vm2 = new NS.ViewModel2("Jane", "Doe");
  ...