JSFiddle - React, Tailwind, and code Playground

by sturtevant

HTML

<script src="http://fgnass.github.com/spin.js/dist/spin.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div data-bind="spinning: spin">
    Spinner Goes Here
</div>
    <label><input type="checkbox" data-bind="checked: spin" /> Spin</label>
</div>
</body>
</html>

CSS

#spinner { margin-left: 50px; margin-top: 50px; height: 200px; width: 200px; border: 1px solid blue; }

JavaScript

ko.bindingHandlers.spinning = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        if (valueUnwrapped == true) {
            if (viewModel.__spinner) {
                var spinner = viewModel.__spinner;
            } else {
                var spinner = viewModel.__spinner = new Spinner();
            }
            spinner.spin(element)
        }
        else if (viewModel.__spinner) {
            viewModel.__spinner.stop();
        }
    }
};

var vmodel = {
    spin: ko.observable(false)
};
ko.applyBindings(vmodel);