sTiLL-iLL/index.html

## 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>

## 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
    };
};

## 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);
   }
);

## stylz.css
.container {
    border: 1px solid black;
    padding: 20px;
    width: 325px;
    margin: 50px auto 50px 350px;
  	border-radius: 5px;
}

	///////// 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>
	//////////// 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
	};
	};

	// 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);
	}
	);
	.container {
	border: 1px solid black;
	padding: 20px;
	width: 325px;
	margin: 50px auto 50px 350px;
	border-radius: 5px;
	}