JSFiddle - React, Tailwind, and code Playground

by Castrolol

HTML

<script src="http://castrolol.com/promiseMe.js"></script>
<div id="contentSemPromise" ></div>
<div id="contentComPromise" ></div>
<div id="contentComPromiseWait" ></div>

JavaScript

//config

function requisicao(url, data, cb){
    var formData = new FormData();
    for(var i in data) {
        if( i == "json" ) data[i] = JSON.stringify(data[i]);
        formData.append(i, data[i]);
    }
    var req = new XMLHttpRequest();
    req.open("POST", url);
    req.onload = function(){
        if( ~url.indexOf("json") ) return cb(JSON.parse(req.responseText));
        cb(req.responseText);
    };
    req.send(formData);
    
}
//metodo ficticio para trazer html
function obterHTML(html, cb){
    requisicao("/echo/html/", { html: html, delay: 2 }, cb);    
}

//metodo ficticio para trazer json
function obterJSON(obj, cb){      
    requisicao("/echo/json/", { json: obj, delay: 2 }, cb);    
}
var htmlDoFormulario = "";
htmlDoFormulario += "<div>";
htmlDoFormulario += "    <input type='text' data-bind='value: nome' />";
htmlDoFormulario += "    <input type='text' data-bind='value: email' />";
htmlDoFormulario += "    <button type='button' data-bind='click: teste'>teste</button>";
htmlDoFormulario += "</div>";
modelUsuario = { nome: "luan de castro", email: "[email protected]" };
//uso

function criarFormulario(cb){ //metodo sem promise
    obterHTML(htmlDoFormulario, function(html){ //ignorando erros, apenas para exemplo
        
        var content = document.querySelector("#contentSemPromise");        
                
        //depois de recuperado o html, vamos recuperar o json
        obterJSON(modelUsuario, function(json){
            
            //converto o model para um model vinculavel
            var model = {
                nome : ko.observable(json.nome),
                email: ko.observable(json.email),
                teste: function(){                 
                    alert(this.nome() + " com o email " + this.email());                    
                }
            };
            content.innerHTML = html + "<span> sem promise </span><hr>";; //adiciono o html
            ko.applyBindings(model, content); //vinculo o model
...