JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

<div class = "" >
    <div class = "" >Title</div>
    <div class = "">
        <span class = ""></span>
        <span class = ""></span>
    </div>
    <div class = "">
        <span class = ""></span>
        <span class = ""></span>
    </div>
    <div class = "">
        <span class = ""></span>
        <span class = ""></span>
    </div>   
</div>

JavaScript

// Example of hard to read code because of programmatically built-up 
// DOM

define([
    // dojo
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/dom-class",
    "dojo/dom-construct",
    "dojo/on"   

], function (declare, lang, domClass, domConstruct, on) {

    return declare(null, {

        constructor: function(){
            on("some-external-event", this._handleExternalEventToUpdateView);            
        },

  
        _handleExternalEventToUpdateView: function (eventData) {
            // parse eventData for useful info  
            var usefulInfo = eventData.usefulInfo;
            
            //  update view
            this._createView(usefulInfo);
            
        },


         _createView: function (info) {
            
            /* Create the content */
            var topLevelNode = domConstruct.create('div', {                
                "class": ""
            });            

           var title = info.title;

            var titleDomNode = domConstruct.create('div', {
                "class": "",
                innerHTML: title
            });
            topLevelNode.appendChild(titleDomNode);
            
            info.moreInfoArray.forEach(function(moreInfo){
                var moreInfoElementContainer =  domConstruct.create('div', {
                    "class": ""
                });
                topLevelNode.appendChild(moreInfoElementContainer);

                var moreInfoElementOne = domConstruct.create('span', {
                    "class": "",
                    innerHTML: moreInfo.prop1
                });
                moreInfoElementContainer.appendChild(moreInfoElementOne);

                var moreInfoElementTwo = domConstruct.create('span', {
                    "class": "",
                    innerHTML: moreInfo.prop2
                });
                moreInfoElementContainer.appendChild(moreInfoElementTwo);
            });

            return topLevelNode;
        }
    });
});