JSFiddle - React, Tailwind, and code Playground

by Anthony DiSalvo

HTML

<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
 <span data-bind="text:successes"></span>

<div data-bind="templateWrapper: { dataInput: $data.successes, itemName: 'successes', maxLength:8000 }"></div>
<script id="textTrackerTemplate" type="text/html">
    <textarea data-bind = "value: itemText, hasFocus:hasFocus,event: { keyup:updateRemaining }" > 
    </textarea>                          
        <div class="lengthmessage edit" data-bind="visible:hasFocus" >
            <div>
                <em>Length:</em > <span data-bind="text:currentLength" > </span>
                <em>Remaining:</em > <span data-bind="text:remainingLength" > </span>
            </div > </div>
</script>

JavaScript

(function (ko) {
            ko.bindingHandlers.templateWrapper = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
                    var existingOptions = ko.utils.unwrapObservable(valueAccessor());
                    viewModel[existingOptions.itemName] = new subModel(existingOptions.dataInput(), existingOptions.maxLength);
                    viewModel[existingOptions.itemName].itemText.subscribe(function (value) {
                        existingOptions.dataInput(value);
                    });

                    newOptions = ko.bindingHandlers.templateWrapper.buildTemplateOptions(existingOptions, viewModel[existingOptions.itemName]);
                    //return ko.bindingHandlers.template.init(element, function () { return newOptions; }, allBindingsAccessor, viewModel, context);
                    return { controlsDescendantBindings: true };
                },
                'update': function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
                    newOptions = ko.bindingHandlers.templateWrapper.buildTemplateOptions(valueAccessor(), viewModel[valueAccessor().itemName]);
                    ko.bindingHandlers.template.update(element, function () { return newOptions; }, allBindingsAccessor, viewModel, context);
                },
                //extend the existing options by adding a name
                buildTemplateOptions: function (options, vm) {
                    return { data: vm, name: ko.bindingHandlers.templateWrapper.templateName };
                },
                templateName: "textTrackerTemplate"
            };

            var viewModel = {
                successes: ko.observable("Test input")
            };

            var subModel = function (value, maxLength) {
                var self = this;
                self.itemText = ko.observable(value);
                self.maxLength = ko.observable(maxLength);
                self.currentLength =...