JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<input data-bind='value: firstName, valueUpdate: "afterkeydown"'></input>
 
<input data-bind='value: lastName, valueUpdate: "afterkeydown"'></input>
<br/>
<span data-bind='text: "As Function: " +  fullNameFunction() '></span>
<br/>
<span data-bind='text: "As Computed: " + fullName()'></span>

JavaScript

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

    this.fullNameFunction = function(){
        console.log("function")
    return this.firstName() + " " + this.lastName();
    }
    
    this.fullName = ko.computed(function(){
        console.log("computed")
    return this.firstName() + " " + this.lastName();
    },this);//This one!
}

ko.applyBindings(new AppViewModel())