JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>


<p>First name: <input data-bind="value: firstName" id="changeMe" /></p>
<p>Last name: <input data-bind="value: lastName, valueUpdate:'afterkeydown'" /></p>

<button data-bind="click: capitalizeLastName">Go caps</button>


<button id="lala">Go caps 2</button>

JavaScript

$("#lala").click(function(){
    $("#changeMe").val("someValue")
    
    setTimeout(function(){
    
           $("#changeMe").change();
    
    },1)
    
 
});

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();    
    }, this);    
    
    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };    
}

var app = new AppViewModel();

// Activates knockout.js
ko.applyBindings(app);