by

Vanilla KemPlates... MVC in stiches....

real kwik model view controller example made with 100% vanilla JS
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/348479/Vanilla-KemPlates----MVC-in-stiches----?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
/// MY "SIGNALS" EVENT SYSTEM //////////////// // this solution Uses my signals.js module //////// styles /////////// body { font-family: Calibri; width: 220px; } .container { border: 1px solid black; padding: 10px; width: 232px; margin: 50px auto 50px 350px; border-radius: 7px; background: lightgray; } fieldset { width: 205px; margin: 0 auto 3px 3px; margin-right: auto; margin-bottom: 6px; padding: 10px; } h1 { margin-left: 55px; margin-right: auto; } span { margin: 3px; } input { margin-top: 2px; margin-bottom: 8px; width: 168px; padding-left: 3px; } ul { padding-left: 20px; list-style: none; color: navy; overflow-x: hidden; } li { max-width: 180px } ///////// Model(s) //////////////////////// // this is the user model object var user1 = { name1: "Richard", name2: "Longwood", occupation: "Software Engineer", age: "40", title: 'Skillz Yo!', subTitle: "add a skill...", showSkills: true, skills: [] }; function UserModel (usr) { this.user = usr; this.get = function(k) { if (k) { var u = this.user; return u[k]; } else { var u = this.user; return u; } }; }; var User = new UserModel (user1); User.prototype = Signals; User.constructor = User; User.on = function(v, cbk) { this.prototype.receive(v, function(d) { cbk.call(this.user, d); }); }; User.emit = function(v) { this.prototype.signal("change", v); }; User.off = function(v) { this.prototype.dropReceivers(v); }; User.set = function(k, v) { if (v && v !== this.user[k]) { if (k == "skills") { this.user[k].push(v); } else { this.user[k] = v; } this.prototype.signal("change", this.user); } }; // array for template strings, // our template engine, and an array of target Ids. var kList = [], TPE = new TPEngine(), Nodz = ["t1", "t2", "t3", "t4", "t5", "t6"]; // this template string is pretty bulky, // so Ill keep it stashed as a string, // then inject it into its target when its time. var template6 = '~>{ 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 = t5.innerText, template6 ]; // 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); }); // Here, we set up the 2-way bindings var bb = document.getElementById("btn"), tgl = document.getElementById("tgl"), updateDom = function (d) { kList.forEach(function(itm) { TPE.BindSet(itm, d); }); }, updateModel = function (d) { User.set("skills", tgl.value); tgl.value = ""; }; // When the button is pressed, this handler // in the controller hears it, grabs the new value // and updates the model. bb.addEventListener("click", updateModel); // When the model's value is changed, it fires a change event. // The handler here in the controller hears it, // grabs the new value, and then updates the dom User.on("change", updateDom); // This part basicly is what runs on window ready. // Now that everything is all set up.. // we iterate over the array of kPlates that we stored earlier, // 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); }); //////////// 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 }; }; ///////// VIEW ////////////////////////// <!DOCTYPE html> <html> <head> <title>MY MVC</title> </head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/stylz.css" /> <script src="js/signals.js"></script> <script src="js/myTPlates.js"></script> <body> <div class="container"> <h1 id="t1"> ~>{ User.get("title") :} </h1> <fieldset> <legend id="t2"> ~>{ User.get("subTitle") :} </legend> <input id="tgl" type="text" placeholder="skills"></input> <button id="btn">+</button> <hr><b> Name: <span id="t3"> ~>{ User.get("name1") +" "+ User.get("name2") :} </span> </br> Age: <span id="t4"> ~>{ User.get("age") :} </span> </br> Dept: <span id="t5"> ~>{ User.get("occupation") :} </span> <hr> Skills List: <ul id="t6"> ~>{ User.get("skills") :} </ul></b> <hr> </fieldset> </div> </body> <script src="js/script1.js"></script> </html>
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus