JSFiddle - React, Tailwind, and code Playground

by paulprogrammer

HTML

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

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

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

JavaScript

// 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");
}

// Activates knockout.js
var avm = new AppViewModel();
ko.applyBindings(avm);

//I need to update first name directly later on, without a binding, in response to an event
avm.firstName('Todd');
//AppViewModel().firstName('Todd');