JSFiddle - React, Tailwind, and code Playground

by Jon Kittell

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<button data-bind="click: clicked, visible: isVisible, enable: enabled, text: buttonText" visi>

JavaScript

var ViewModel = function(){
    var self = this;
    self.enabled = ko.observable(true);
    self.buttonText = ko.observable("Click Me!");
    self.isVisible = ko.observable(true);
    self.clicked = function(){
        self.enabled(false);
        self.buttonText("Please wait...");
    };
};

$(function(){
    var model = new ViewModel();
    ko.applyBindings(model);
})