JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<script src="https://rawgit.com/knockout/knockout/v3.2.0-beta/dist/knockout.debug.js"></script>
<script src="http://mbest.github.io/knockout.punches/knockout.punches.js"></script>
<div style="padding: 15px; margin: 5px; border: 1px solid #DDD;" 
    data-bind="template: { name: template, data: data, afterRender: afterRender }"></div>

<script type="text/html" id="model1">
    <h2>Model #1</h2>
    <hr>
    <font color="red" data-bind="text: name1"></font>
</script>

<script type="text/html" id="model2">
    <h2>Model #2</h2>
    <hr>
    <font color="red" data-bind=":blah:blah:"></font>
        <font color="red" data-bind="text: blah, visible: what"></font>
</script>

<script type="text/html" id="model3">
    <h2>Model #3</h2>
    <hr>
    <font color="red" data-bind="text: name3"></font>
</script>

<button data-bind="click: recheckData">re Check On Model1</button>
<button data-bind="click: recheckData2">re Check  On Model2</button>
<button data-bind="click: recheckData3">re Check  On Model3</button>

JavaScript

var ErrorHandlingBindingProvider = function() {
    var original = new ko.bindingProvider(); 

    //determine if an element has any bindings
    this.nodeHasBindings = original.nodeHasBindings;

    //return the bindings given a node and the bindingContext
    this.getBindingAccessors = function(node, bindingContext) {
        var result = {};
        
        //catch general errors parsing binding syntax
        try {
            result = original.getBindingAccessors(node, bindingContext);
        }
        catch (e) {
            if (console && console.log) {
                console.log("Error in binding syntax: " + e.message, node);   
            }
        }
        
        //catch errors when actually evaluating the value of a binding
        ko.utils.objectForEach(result, function (key, value) {
            result[key] = function() {
                var result = null;

                try {
                    result = value();  
                }
                catch (e) {
                    if (console && console.log) {
                        console.log("Error in \"" + key + "\" binding: " + e.message, node);   
                    }
                }
                
                return result;
            };
        });

        return result;
    };
};

ko.bindingProvider.instance = new ErrorHandlingBindingProvider();

function model1 (name) {
    this.name1 = name;
    
    this.template = "model1";
}


function model3 (name) {
    this.name3 = name;
    
    this.template = "model3";
}

function model2 (name, lastname) {
    this.name2 = name;
    //this.lastname = lastname; // trigger error binding!
        
    this.template = "model2";
}

var viewModel = {
    data: ko.observable({}),
    template: function() {
        return viewModel.data().template || 'model1'; 
    },
    
    afterRender: function () {
        ///alert('sdfsdf');                    
    },
    
    recheckData2: function() {
        viewModel.data(new model2('zahar',...