JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<div id="output">
</div>
<button id="button">
Force New Data
</button>
<div id="json">
</div>
CSS
#output input{
display:block;
margin-bottom:4px;
}
JavaScript
function AliveApp(id){
this.id = id;
this.observables = Array();
this.sync = function(){
for(var i=0;i<this.observables.length;i++){
this.observables[i].update(this.observables[i].data);
}
}
}
function AliveComponent(app,options){
var t = this;
app.observables.push(t);
if(!options.type){
throw new Error("AliveComponent Error Code 50: type Required when building an Alive Component");
}
if(!options.parent){
throw new Error("AliveComponent Error Code 55: parent Required when building an Alive Component");
}
if(typeof(options.data) == 'undefined'){
throw new Error("AliveComponent Error Code 60: data Required when building an Alive Component");
}
t.type = options.type;
t.data = options.data;
t.parent = options.parent; // passed as a AliveDOM object
t.component = null;
t.inputAttributesArray = Array(
'autocomplete',
'autofocus',
'disabled',
'height',
'id',
'list',
'max',
'maxlength',
'min',
'multiple',
'name',
'pattern',
'placeholder',
'readonly',
'required',
'size',
'step',
'value',
'width'
);
if(t.type == 'checkbox'){
options.value = t.data[options.mapto];
this.value = options.value;
options.value = 1;
this.checked = false;
} else {
options.value = t.data[options.mapto];
this.value = options.value;
}
t.createComponent = function(options){
switch(t.type){
case "textarea":
t.component = document.createElement('textarea');
break;
case "select":
t.component = document.createElement('select');
break;
default:
t.component = document.createElement('input');
t.component.type = t.type;
break;
}
for(var i=0;i<t.inputAttributesArray.length;i++){
if(options[t.inputAttributesArray[i]]){
...