JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<span id="span-one" data-bind="text: name"></span>
<br /><br />
<span id="span-two" data-bind="text: (age() > 50) ? 'Too old' : 'Not old' "></span>
<br /><br />
<span id="span-three" data-bind="text: goodName"></span>
<br /><br />

<!--ko text: name--><!--/ko-->

CSS

body
{
    font-family: Arial;
}

JavaScript

// Text and HTML Bindings

// Our viewmodel with observables
function viewmodel() {
    self = this;
    
    this.name = ko.observable("Steven Hackett");
    this.age = ko.observable(57);
    this.goodName = ko.observable("<h2>Admiral Steven Hackett<h2>");
}

// Runs at document load
$(document).ready(function(){
    // Create an instance of the viewmodel
    var myViewmodel = new viewmodel();
    
    // Bind the instance to the view
    ko.applyBindings(myViewmodel);
});