JSFiddle - React, Tailwind, and code Playground

by psoares

HTML

<div id="mainContent">     
    <h3>Model</h3>     
    <div class="row">         
        <textarea class="cell" data-dojo-type="dijit.form.Textarea" id="modelArea"> 
            {     "First"  : "John",     "Last"   : "Doe",     "Email"  : "[email protected]",     "Address": {         "Street" : "123 Valley Rd",         "City"   : "Katonah",         "State"  : "NY",         "Zip"    : "10536"     },     "Phones" : [{         "Areacode" : "111",         "Local"    : "111-1111"     },{         "Areacode" : "222",         "Local"    : "222-2222"     }] }         
        </textarea>     
    </div>     
    <h3>Generated View</h3>     
    <div id="view" data-dojo-type="dojox.mvc.Generate" data-dojo-props="idNameMapping:{'String' : 'textarea_t'}"></div> 
</div>

JavaScript

function updateView() {  
    require(["dijit/registry", 
             "dijit/form/Textarea",
             "dojox/mvc",
             "dojox/mvc/StatefulModel"], function(dijit, Textarea, mvc, StatefulModel) {
                 var modeldata = dojo.fromJson(dijit.byId("modelArea").value);
                var model = new StatefulModel({ data : modeldata });
                var widget = dijit.byId("view");
                if(widget){
                    widget.set("ref", model);
                }    
             });
}

require([
        "dojo/parser",
        "dijit/form/Textarea", 
        "dojox/mvc/Generate",        
        "dojo/domReady!"], function(parser) {    
            parser.parse();
            dijit.byId("modelArea").onBlur = updateView;
            dijit.byId("view").startup();
            updateView();
});;