JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
<input type="text" id="searchQuery" />
<button id="searchButton">Search</button>
<button id="toggleErrorButton">Toggle Error</button>
<div id="result"></div>
<div id="error" style="display:none;">
    error
    <div id="errorMessage"></div>
</div>

JavaScript

//검색어 입력을 받아 서버로부터 받을 결과를 노출할 목적으로 잡은 구조
//1. EventHandling = Presenter
//2. DOM Manipulation = View
//3. AJAX calls = Model

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

emart.Model.Search = {
    searchWebsite: function(searchQuery, handlers) {        
        var data = {
            json: $.toJSON({
                text: 'Echo JSON',
                q : searchQuery
            }),
            delay: 1
        }
        
        $.ajax({            
            type: 'POST',
            url: '/echo/json/',
            dataType: 'json',
            data: data,
            success: handlers.success,
            error: handlers.error
        });
    }    
};

emart.View.Search = {
    _welResultArea : $("#result"),
    _welErrorArea : $("#error"),
    attachSearchHandler: function(searchHandler) {
        $("#searchButton").click(function () {
            var searchQuery = $("#searchQuery").val();            
            searchHandler.call(this, searchQuery);
        });
    },    
    attachToggleErrorHandler: function(searchToggleHandler) {
        $("#toggleErrorButton").click(function () {            
            searchToggleHandler.call(this);
        });
    },    
    showSearchResults: function(searchResults) {        
        this.hideSearchErrorArea();
        this._welResultArea.html(searchResults.q);
    },
    showSearchError: function(error) {        
        this.showSearchErrorArea();
        this._welErrorArea.find("#errorMessage").html(error);        
    },
    toggleSearchErrorArea : function(){
        this._welErrorArea.toggle();
    },
    showSearchErrorArea : function(){
        this._welErrorArea.show();
    },
    hideSearchErrorArea : function(){
        this._welErrorArea.hide();
    }
};

emart.Presenter.Search = {    
    init: function() {
        emart.View.Search.attachSearchHandler(this.search);
       ...