JSFiddle - React, Tailwind, and code Playground

by Jesse Johnson

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/blaze/3.0.0/blaze.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div class="container">
  <article class="message">
    <div class="message-header" data-bind="text: title"></div>
    <div id="output" class="message-body">

    </div>
  </article>
</div>

CSS

* {
  border-radius: 0 !important;
}

TypeScript

let outputElm = $("#output");

class ViewModel {
  title = ko.observable("");
  constructor(title: string) {
    this.title(title);
    outputElm.on("custom.event", (e) => {
      this.title(e.type);
    });
  }
}

let vm = new ViewModel("KO-OUTPUT");
ko.applyBindings(vm);

outputElm.on("custom.event", (e) => {
  outputElm.append('<pre>' + JSON.stringify(e, null, 2) + '</pre>');
});

setTimeout(() =>{
	outputElm.trigger("custom.event");
},3000);