Skip to content

Instantly share code, notes, and snippets.

@sTiLL-iLL

sTiLL-iLL/index.html

Last active March 20, 2025 08:01
Show Gist options
  • Save sTiLL-iLL/fa7ce6133cb9162d285a to your computer and use it in GitHub Desktop.
Save sTiLL-iLL/fa7ce6133cb9162d285a to your computer and use it in GitHub Desktop.
Download ZIP
MVC and Templates... vanilla.js... its a work in progress, but its super light, easy to use, and fast as hell. fast
Raw
index.html
///////// VIEW //////////////////////////
<!DOCTYPE html>
<html>
<head>
<title>MY MVC</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylz.css" />
<script src="signals.js"></script>
<script src="myTPlates.js"></script>
</head>
<body>
<div class="container">
<h1 id="t1"> ~>{ User.get("title") :} </h1>
<input id="tgl" type="text"></input><button id="btn">GO</button>
<hr><b>
Name: <span id="t2">~>{ User.get("name1") +" "+ User.get("name2") :} </span><br>
Age: <span id="t3">~>{ User.get("age") :}</span><br>
Gender: <span id="t4">~>{ User.get("gender") :}</span>
<hr>
Skills List:
<ul id="t5">~>{ User.get("skills") :}</ul>
<hr></b>
</div>
</body>
<script src="script1.js">
</script>
</html>
Raw
myTPlates.js
//////////// Template kompiler (controller) //////////////////////////////////////
this.TPEngine = function() {
var kompiler = function(templateString, model) {
var rgx = /~>{([^:]+)?:}/g,
rgex = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
segment = 'var r=[];\n', position = 0,
kompile = function(chunk, ixjs) {
ixjs ? (segment += chunk.match(rgex) ? chunk + '\n' : 'r.push(' + chunk + ');\n') :
(segment += chunk != '' ? 'r.push("' + chunk.replace(/"/g, '\\"') + '");\n' : '');
return kompile;
};
while (match = rgx.exec(templateString)) {
kompile(templateString.slice(position, match.index))(match[1], true);
position = (match.index + match[0].length);
}
;
kompile(templateString.substr(position, templateString.length - position));
segment += 'return r.join("");';
return new Function(segment.replace(/[\r\t\n]/g, '')).apply(model);
},
template = function(elementID, prop, templateString) {
var c = {
tStr: templateString,
tProp: prop,
tVal: document.getElementById(elementID)
};
return c;
},
applyBind = function(temp, model) {
if (temp.tVal.id && temp.tStr && model) {
template = temp;
var el = document.getElementById(template.tVal.id);
el[template.tProp] = kompiler(template.tStr, model);
template.tVal = el;
}
};
return {
Template: template,
BindSet: applyBind
};
};
Raw
script1.js
// This is our Model (user) - Yay!
var user = {
name1: "Heath",
name2: "Dernovich",
gender: "male",
age: "40",
title: 'My Skillz Yo!',
showSkills: true,
skills: [
"js", "html", "css", "ajax", "xml", "json", "mathematics",
"algorthyms", "design", "technical writing", "testing", "debugging"
]
};
function UserM(usr) {
var user = usr;
this.get = function(k) {
if (k) {
return user[k];
}
else {
return user;
}
};
};
var User = new UserM(user);
User.prototype = Signals;
User.constructor = User.constructor;
User.on = function(v, cbk) {
this.prototype.receive(v, function(d) {
cbk.call(user, d);
});
};
User.emit = function(v) {
this.prototype.signal("change", v);
};
User.set = function(k, v) {
if (v && v !== user[k]) {
user[k] = v;
this.prototype.signal("change", user);
}
};
User.off = function(v) {
this.prototype.dropReceivers(v);
};
// array for template strings,
// our template engine, and an array of target Ids.
var kList = [],
TPE = new TPEngine(),
Nodz = ["t1", "t2", "t3", "t4", "t5"];
// this template string is pretty bulky,
// so Ill keep it stashed as a string,
// then inject it into its target when its time.
var template5 = '~>{ if(User.get("showSkills")) { :}' +
'~>{ for(var index in User.get("skills")) { :}' +
'<li><a href="#"> ~>{ User.get("skills")[index] :}' +
'</a></li>~>{ } :}' +
'~>{ } else { :}' +
'<li>none</li>' +
'~>{ } :}';
// this array holds the template strings.
// the innerText is where I extract them from the mark-up
// notice how #5 is already defined
var Templates = [
template1 = t1.innerText,
template2 = t2.innerText,
template3 = t3.innerText,
template4 = t4.innerText,
template5
];
// Now I iterate over the list of nodes and templates,
// pull each one out per the array position and plug
// them into the kompiler along with the property of the node that
// the content is assigned to, then komile into a "kPlate" template.
// each one of these kPlates is then put into another array: "kList"
Nodz.forEach(function(tmpltNd) {
var seed = Templates.shift();
kPlt = TPE.Template(tmpltNd, "innerHTML", seed);
kList.push(kPlt);
});
// Then iterate over the array of kPlates, calling BindSet on each one.
// This renders the mark-up to the dom at lightening speed, and there ya go!
kList.forEach(function(itm) {
TPE.BindSet(itm, User);
});
// Here, we set up the 2-way bindings
var bb = document.getElementById("btn"),
tgl = document.getElementById("tgl");
User.on("change", function(d) {
kList.forEach(function(itm) {
TPE.BindSet(itm, User);
});
});
bb.addEventListener("click", function(d) {
User.set("name1", tgl.value);
}
);
Raw
stylz.css
.container {
border: 1px solid black;
padding: 20px;
width: 325px;
margin: 50px auto 50px 350px;
border-radius: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment