JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<script id="test" type="text/template">
<div class="item">
    <span><!--title--></span> <span><!--name--></span>
</div>
</script>

JavaScript

var template = document.getElementById("test").textContent,
    uid = 0, nodes = {};

var data = [{
    name: "Heino",
    title: "Mr."
}, {
    name: "Lucas",
    title: "Senior"
}, {
    name: "Harrison",
    title: "Mr."
}];

function render (element, template, data) {
    var html = "",
        i = 0,
        l = data.length,
        item,
        liveData = [];
    
    
    
    
    element.innerHTML = html;
    while (i < l) {
        item = data[i];    
        var object = {};
        for (var key in item) {
            (function (item, key, id) {
                Object.defineProperty(object, key, {
                    get: function() {return nodes[id].nodeValue; },
                    set: function(text) { nodes[id].nodeValue = text; }
                });
            } (item, key, id));
        }
        liveData.push(object);
        i++;
    }
    
    return liveData;
}