JSFiddle - React, Tailwind, and code Playground

by Abid Akhtar

HTML

<h1>Text and appearance bindings</h1>
The first name is <span data-bind="text: firstName"></span> is <span data-bind="text: age() >= 18 ? 'adult' : 'young'"></span> person.<br/>
The last name is <span data-bind="text: lastName"></span><br/>
The age is <span data-bind="text: age"></span><br/>
<span data-bind="html: about"></span>
<div data-bind="css: { redStyle: favoriteColor() == 'red', greenStyle: favoriteColor() == 'green' }">
John's favorite color is <span data-bind="text: favoriteColor"></span>.
</div>
<div data-bind="style: { color: favoriteColor() }">
John's favorite color is <span data-bind="text: favoriteColor"></span>.
</div>
John's favorite site is <a data-bind="attr: { href: favoriteUrl() }">PacktPub</a>.
<div data-bind="visible: leastFavoriteSite().length > 0">
John's least favorite site is <a data-bind="attr: { href: leastFavoriteSite()}">Yahoo</a>.
</div>
<h1>Form Field Bindings</h1>
The first name is <input type="text" data-bind="value: firstName" />.
<div>
  John's age is <span data-bind="text: age"></span>.
  <button data-bind="click: growOld">Grow old</button>
</div>
<div>
  John's age is <span data-bind="text: age"></span>.
  <form data-bind="submit: growOld">
    <button type="submit">Grow old</button>
  </form>
</div>
<div>
  <div data-bind="event: { mouseover: showAbout, mouseout: hideAbout }">
    Mouse over to view the information about John.
  </div>
  <div data-bind="visible: aboutEnabled">
    John's favorite site is <a href='http://www.packtpub.com'>PacktPub</a>.
  </div>
</div>
<input type="checkbox" data-bind="checked: isMarried" />
  Is married
  <br/>  
 The user <span data-bind="text: firstName"></span> is <span data-bind="text: isMarried() == true ? 'Married' : 'UnMarried'"></span>
 <p>
    <input type="checkbox" data-bind="checked: isMarried" />
    Is married
  </p>
  <p>
    Wife's name:
    <input type="text" data-bind="value: wife, enable: isMarried" />
  </p>
  <span data-bind="visible : isMarried() ?true:false">
    Joe is...

CSS

.redStyle {
    color: red;
}
.greenStyle {
    color: green;
 }

JavaScript

// Model
var person = {
  firstName: "John",
  lastName:"Doe",
  age: 30,
  about: "John's favorite site is <a href='http://www.packtpub.com'>PacktPub</a>.",
  favoriteColor: "red",
  favoriteUrl: "http://www.packtpub.com",
  leastFavoriteSite: "http://www.yahoo.com",
  leastFavoriteSiteName: "Yahoo",
  isMarried: true,
  wife: "",
  children: ["Jonnie", "Jane", "Richard", "Mary"],
  selectedChildren: ["Jonnie", "Mary"],
  myChildren: [
    { firstName: "Jonnie", age: 3 },
    { firstName: "Jane", age: 5 },
    { firstName: "Richard", age: 7},
    { firstName: "Mary", age: 9}
  ],
  showAbout: false
};
// ViewModel
var PersonViewModel = function() { 
  var self = this;
  self.firstName = ko.observable(person.firstName);
  self.lastName = ko.observable(person.lastName);
  self.age = ko.observable(person.age);
  self.about = ko.observable(person.about);
  self.favoriteColor = ko.observable(person.favoriteColor);
  self.favoriteUrl = ko.observable(person.favoriteUrl);
  self.leastFavoriteSite = ko.observable(person.leastFavoriteSite);
  self.growOld = function() {
    var previousAge = self.age();
    self.age(previousAge + 1);
  }
  self.aboutEnabled = ko.observable(false);
  self.showAbout = function() {
    self.aboutEnabled(true);
  };
  self.hideAbout = function() {
    self.aboutEnabled(false);
  },
  self.isMarried = ko.observable(person.isMarried);
  self.wife = ko.observable(person.wife);
  self.children = ko.observable(person.children);
  self.selectedChildren = ko.observable(person.selectedChildren);
  self.myChildren = ko.observable(person.myChildren);
  self.showAbout = ko.observable(person.showAbout);
};
// Apply
ko.applyBindings(PersonViewModel);