JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<div id="render" data-bind="css: { 'is-active': isActive }, template: { name: 'temp1', afterRender: log }"></div>
  <script id="temp1" type="text/html">
    <h2 data-bind="text: foo"></h2>
      <span data-bind="text: isActive"></span>
  </script>
  
  <button data-bind="click: toggle">doh</button>

JavaScript

var ViewModel = function(){
  this.background = ko.computed(function() {
    return this.isActive() ? 'blue' : 'red';
  }, this );
};

ViewModel.prototype = {
  isActive: ko.observable(false),
  foo: 'bar',
  log: function() { 
    console.log('render'); 
  },
  toggle: function() {   
    this.isActive(!this.isActive());
  }
};

ko.applyBindings(vm = new ViewModel());