JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<script src="https://raw.github.com/vaporworks/Devlink2011-REST-WebClient/master/ShortOrderExample/client/js-lib/postal.js"></script>
<script src="https://raw.github.com/vaporworks/Devlink2011-REST-WebClient/master/ShortOrderExample/client/js-lib/diagnostics.js"></script>

JavaScript

var State = function(abbrev, name, population) {
    this.abbreviation = abbrev;
    this.name = name;
    this.population = population;
    
    State.prototype.toString = function() {
         return this.abbreviation;   
    }
    
};

var st = new State("TN", "Tennessee", 6296254);

var model = {
    firstName: "Jim",
    lastName: "Cowart",
    age: 38,
    getName: function(title) {
         return title + " " + this.firstName + " " + this.lastName;  
    },
    address: {
        street: "2950 Buckner Lane",
        city: "Spring Hill",
        state: st,
        zip: 37174 
    },
    children: [{name: "James Michael Cowart", age: 4},
               {name: "Nathaniel Garrett Cowart", age: 2}]
};

var ProxyProvider = function() {
    ProxyProvider.prototype.wrap = function() {
        throw "This browser does not support getters and setters on JavaScript objects";
    };
        
    if(Object.defineProperty) {
        this.wrap = function(context, namespace, subject, memberName) {
            Object.defineProperty(context, memberName, {
                set : function (x) {
                    var old = subject[memberName];
                    if(typeof x === 'object') {
                        subject[memberName] = new Proxify(namespace, x);
                    }
                    else {
                        subject[memberName] = x;   
                    }
                    postal.publish(namespace + "._changed", { oldValue: old, newValue: x });
                },
                get : function () {
                    postal.publish(namespace + "._read");
                    return subject[memberName];
                },
                enumerable: true
            });
        }
    }
    else if(Object.prototype.__defineSetter__ && Object.prototype.__defineGetter__) {
        this.wrap = function(context, namespace, subject, memberName) {
            //setter
            context.__defineSetter__(memberName, function(x) {
                var old...