JSFiddle - React, Tailwind, and code Playground

by JayData

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/1.2.7/jaydata.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
<script id="Entity" type="text/x-handlebars-template">
    <div>
        <div>Entity name: {{Name}}</div>
    </div>
</script>

<script id="PropertyList" type="text/x-handlebars-template">
    {{#each fields}}
    <div><b> {{name}}</b><br/><input value="{{value}}" /></div>
    {{/each}}
</script>

<script id="EntityTemplate" type="text/x-handlebars-template">
    <li {{entityScope}} >
        <a href="javascript:void" {{entityCommand 'select'}}>{{Name}}</a>
    </li>
</script>

<div class="row">
    <section class="span3" style="position:relative;height:100%;border-right:1px solid lightgray">
        <h3>Databases</h3>
        <ul class="nav nav-pills nav-stacked single-select"  id="databases"></ul>
    </section>

    <section class="span3" style="height:100%;border-right:1px solid lightgray">
        <h3>Tables</h3>
        <ul class="nav nav-pills nav-stacked single-select" id="entitysets"></ul>
    </section>

    <section class="span3" style="height:100%;border-right:1px solid lightgray">
        <h3>Entity & Fields</h3>
        <div id="entityDisplay"></div>
        <ul class="nav nav-pills nav-stacked single-select" id="entityfields"></ul>
    </section>

    <section class="span3" style="height:100%">
        <h3>Field Settings</h3>
        <form id="properties">
        </form>
    </section>

</div>

CSS

body { font-family:'Segoe UI'}

JavaScript

var oldProcessor = $data.Entity.inheritedTypeProcessor;
        var templateCache = {};

        function getTemplate(templateName) {
            return templateCache[templateName] || (templateCache[templateName] = Handlebars.compile($('#' + templateName).html()));
        }
        $data.Entity.inheritedTypeProcessor = function (type) {
            if (oldProcessor) {
                oldProcessor(type);
            }
            type.prototype.renderTo = function (selector, renderMode, templateName) {
                renderMode = renderMode || "append";
                if (!templateName) {
                    var sname = $data.Container.resolveName(this.getType()).split(".");
                    var name = sname[sname.length - 1];
                    templateName = name;
                }
                if (typeof selector === 'string') {
                    selector = $(selector);
                }
                var template = getTemplate(templateName);
                if ("replaceContent" == renderMode) {
                    selector.empty();
                    renderMode = "append";
                }
                if ("append" == renderMode) {
                    selector.append(template(this));
                } else if ("prepend" == renderMode) {
                    selector.prepend(template(this));
                } else {
                    throw new Error("unknown render mode: " + renderMode);
                }
                var d = new $.Deferred();
                return d.resolve(this);
            }
        }

        $data.Queryable.prototype.renderTo = function (selector, templateName, renderMode) {
            renderMode = renderMode || "replaceContent";

            if (!templateName) {
                var sname = $data.Container.resolveName(this.defaultType).split(".");
                var name = sname[sname.length - 1];
                templateName = name;
            }
            var template = getTemplate(templateName);
           ...