JSFiddle - React, Tailwind, and code Playground

by TheDev6

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="container">
    <input type="text" data-bind="value: myText, valueUpdate: 'afterkeydown'" />
    <div style="background-color: yellow;" data-bind="text: myText"></div>

    <input type="text" data-bind="value: myCustomText, valueUpdate: 'afterkeydown'" />
    <div data-bind="generic: myStuff.myBindingDefinition"></div>
    <div>Current Css Class = <span data-bind="text: myCss"></span></div>
</div>

CSS

.cold {
        background-color: #e878d8;
    }

    .hot {
        background-color: #f23b3b;
    }

    .just-right {
        background-color: #cdcba6;
    }

    .way-over {
        background-color: #cdcba6;
    }

JavaScript

var myStuff = function () {

        var myViewModel = function () {
            return {
                myText: ko.observable(''),
                myCustomText: ko.observable(''),
            };
        }();

        myViewModel.myCss = ko.computed(function () {
            var length = this.myCustomText().length;
            var css = '';
            if (length < 3) {
                css = 'cold';
            }
            if (length >= 3 && length < 6) {
                css = 'just-right';
            }
            if (length >= 6 && length < 9) {
                css = 'hot';
            }
            if (length >= 9) {
                css = 'way-over';
            }
            return css;
        }, myViewModel);

        var registerCustomBinding = function () {
            ko.bindingHandlers.generic = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                    ko.applyBindingsToNode(element, valueAccessor(), viewModel);
                }
            };
        };

        var myBindingDefinition = {
            text: myViewModel.myCustomText,
            css: myViewModel.myCss
        };

        var init = function () {
            registerCustomBinding();
            ko.applyBindings(myViewModel);
        };

        return {
            'init': init,
            'myBindingDefinition': myBindingDefinition,
            'myViewModel': myViewModel
        };
    }();

    $(function () {
        myStuff.init();
    });