JSFiddle - React, Tailwind, and code Playground

by jhorvath

JavaScript

var contentManager = {
    activate: function(viewModel, elementSelector) {
        var deferred = $.Deferred();
        var self = this;
        this._loadContent(elementSelector).done(function(element) {
            self._bind(viewModel, element[0]).done(function() {
                self._show(element).done(function(){
                    deferred.resolve();
                });
            });
        });
        return deferred.promise();
    },
    
    deactivate: function(viewModel, elementSelector) {
        var element = $(elementSelector);
        return this._hide(element);
    },
    
    _loadContent: function(elementSelector) {
        var deferred = $.Deferred();
        var element = $(elementSelector);
        if(element.data("isLoaded")) {
            deferred.resolve();
        } else {
            element.load('partial view name', function(response, status, xhr) {
                if ( status == "error" ) {
                    alert("Error while loading view: " + xhr.status + " " + xhr.statusText);
                    deferred.reject();
                } else {
                    element.data("isLoaded", true);
                    deferred.resolve();
                }
            });
        }
        return deferred.promise();
    },
    
    _show: function(element) {
        var deferred = $.Deferred();
        element.fadeIn(200, function(){
            deferred.resolve();        
        });
        return deferred.promise();
    },
    
    _hide: function(element) {
        var deferred = $.Deferred();
        element.fadeOut(200, function(){
            deferred.resolve();        
        });
        return deferred.promise();
    }
};

var SettingViewModel = (function(){
    function settingViewModel() {
        this.settingsDictionary = [];
    }
    
    settingViewModel.prototype = {
        onActivate: function() {
            contentManager.activate(this, "#settingContainer").done(function(){
                alert("Setting...