JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
<button id='userInfoBtn'>click</button>
<div id="userInfoArea">
</div>
<script id="_tplUserDetail" type="text/x-jquery-tmpl"> 
    <li>
        Name: ${name}<em>(${address})</em>
    </li>
</script>

JavaScript

var emart = emart || {};
emart.Model = emart.Model || {};
emart.View = emart.View || {};
emart.Presenter = emart.Presenter || {};

emart.Model.UserTable = function () {	
	this.init();
};

emart.View.UserTable = function () {	
	this.init();
};

emart.Presenter.UserTable = function (options) {
	$.extend(this, options || {});
	this.init();
};

emart.Model.UserTable.prototype = {    
    _sUserInfoUrl : null,
    init: function(){        
        this._sUserInfoUrl = 'http://jsfiddle.net/echo/jsonp/'; 
    },
    getUserInfo : function(){
        var sUserInfoUrl = this._sUserInfoUrl;
        var htUserData = {            
            result: true,
            json: $.toJSON({
                data : [
                //{id: 1, name: "kim", address: "seoul"},
                //{id: 2, name: "jim", address: "ny"},
                //{id: 3, name: "joe", address: "bangkok"}
                ],
            }),
        };
          
        return $.ajax({
            type: "get",
            url: sUserInfoUrl,
            data: htUserData,
            dataType: "jsonp"
        });
    }
};

emart.View.UserTable.prototype = {
    _welUserInfoBtn : null,
    _welUserInfoArea : null,
    _tpl : null,
    init: function(){        
        this._assignElement();
        $("#_tplUserDetail").template("tplUserDetail");
    },
    _assignElement : function(){        
        this._welUserInfoBtn = $("#userInfoBtn");
        this._welUserInfoArea = $("#userInfoArea");
    },
    render : function(aUserData){        
        aUserData = [
            {id: 1, name: "kim", address: "seoul"},
            {id: 2, name: "jim", address: "ny"},
            {id: 3, name: "joe", address: "bangkok"}
        ];

        $.tmpl("tplUserDetail", aUserData).appendTo(this._welUserInfoArea);
    }
};

emart.Presenter.UserTable.prototype = {
    init: function(){        
        this._attachEventHandlers();
    },
    _attachEventHandlers : function(){        
		this.view._welUserInfoBtn.on("click",...