JSFiddle - React, Tailwind, and code Playground

by a_robson

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

JavaScript

var drWho = {
    name: "The Doctor",
    age: 900,
    craft: {
        name: "Tardis",
        timeTravel: true,
        spaceTravel: true,
        impenetrable: true,
        shapeShift: false 
    },
    travelBuddies:
    [
        { 
            name: "Rose", 
            age: 25,
            adventures: ["End of the World"]
        },
        { name: "Martha", age: 25 }
    ]
};

var coalesce = function( value, defaultValue ) {
    return typeof(value) != 'undefined' ? 
        value : defaultValue;
};

var isObject = function( value ) {
    return typeof(value) === 'object';
};

var crawl = function( namespace, element, callback ) {
    _(element)
        .chain()
        .keys()
        .each( function( key ) {
            var child = element[key];
            var fqn = namespace === "" ? 
                key : namespace + "." + key;
            callback( namespace, key, child );
            if( !_.isNull( child ) && isObject( child ) ) {
                crawl( fqn, child, callback );
            }
    });
};

var DomWriter = function (target, namespace) {
    var instance = this;
    var template = namespace;
    
    this.crawl = function( namespace, element, callback ) {
        _(element)
            .chain()
            .keys()
            .each( function( key ) {
                var child = element[key];
                var fqn = namespace === "" ? 
                    key : namespace + "." + key;
                callback( fqn, key, child );
                if( !_.isNull( child ) && isObject( child ) ) {
                    instance.crawl( fqn, child, callback );
                }
        });
    };
    
    this.domCrawl = function( namespace, element, callback ) {
        var id = coalesce( element["id"], "" );
        var fqn = namespace === "" ?
            id : ( id === "" ? namespace : namespace + "." + id );
        callback( fqn, id, element );
        if( element.children !== undefined && 
            element.children.length > 0 ) {
      ...