ohm.js

custom js template engine for making web UI. Client side rendering.

by rahulsemwal1991

HTML

<html>
  <head>
    <style></style>
  </head>
  <body>
    <div class="page">
    
    </div>
    <script id="list" type="text/html">
    	<li data="{{age}}">{{name}}</li>
    </script>
  </body>
</html>

JavaScript

UIengine = function(tpl, obj, cb){
  //magic go here.
    var re = /<%([^%>]+)?%>/g, match;
    while(match = re.exec(tpl)){
    	tpl = tpl.replace(match[0], data[match[1]])
    }
  
  //magic end here.
  if(typeof cb == "function"){
  	cb(tpl);
  }  
  return tpl;
}

var data = {name:"rahul",age:28};debugger;
var markup = document.getElementById("list").innerHtml;
var parsedMarkup = UIengine(markup, data, function(r){});
var placeholder = document.getElementsByClassName("page");
placeholder.innerHtml = '<ul>'+parsedMarkup + '</ul>';