JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<script type="text/template" id="sometemplate">
<label data-bind="title->html">Something</label>
<p>Here</p>
<input name="something" type="text" value="9" data-bind="something->value" />
</script>

JavaScript

var template = $('sometemplate');
var dummyElement = $(document.createElement('div'));
dummyElement.set('html',template.get('html'));

var theThing = {
    bound: {},
    set: function (key, value) {
        var element = this.bound[key];
        var updateWhat = element.retrieve('update what?');
        element.set(updateWhat,value);
    },
    container : document.createDocumentFragment(),
    toElement: function () {
        return this.container;
    }
};

var boundElements = dummyElement.getElements('[data-bind]');
for (var i = 0; i < boundElements.length; i++) {
    var element = $(boundElements[i]);
    var bindValue = element.get('data-bind').split('->');
    element.store('update what?', bindValue[1] || 'html');
    theThing.bound[bindValue[0]] = element;
}

//console.dir( dummyElement );
while (dummyElement.children.length){ 
    //console.log(dummyElement.children[i])
    theThing.container.appendChild(dummyElement.children[0]);
}

document.body.appendChild(theThing.toElement());

setInterval(function () {
    theThing.set('something', i++);
}, 1000);