JSFiddle - React, Tailwind, and code Playground

by nyothecat

HTML

<script src="https://www.assembla.com/code/cromaticaSoftware/subversion/node/blob/Demos/SPA/CodeCamper/CodeCamper.Web/Scripts/lib/knockout.asyncCommand.js?raw=1&amp;rev=604"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id='koRoot'>
    <input type='text' data-bind='value: username' />
    <input type='text' data-bind='enable: enableButton,value: password' />
    <input type='button' data-bind='command: newPatient' value='Go!' />
</div>

JavaScript

$(document).ready(function () {
    var ViewModel = function () {
        var self = this;
        this.awaitingValidation = ko.observable(false);
        this.enableButton = ko.observable(true);
        this.username = ko.observable('enter name');
        this.password = ko.observable('enter password');
        this.isValid = ko.observable(true);

        var callNewPatient = function () {
            if (self.awaitingValidation()) self.newPatient.execute();
        }

        this.username.subscribe(callNewPatient);
        this.password.subscribe(callNewPatient);

        this.newPatient = ko.asyncCommand({
            execute: function (complete) {
                self.isValid(self.username() === 'me' && self.password() === 'pass');
                if (self.isValid()) {
                    self.awaitingValidation(false);
                    alert("Valid!");
                } else {
                    self.awaitingValidation(true);
                }
            },
            canExecute: function (isExecuting) {
                return self.isValid();
            }
        });
        return this;
    };
    ko.applyBindings(new ViewModel(), document.getElementById("koRoot"));
});