<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<ul id="data-list" style="border:1px solid red;"></ul>
<script data-tmpl="data-list" type="text/html">
<li> <@=list1@> </li>
<li> <@=list2@> </li>
<li> <@=list3@> </li>
<li> <@=list4@> </li>
<li> <@=list5@> </li>
</script>
</div>
</div>
<script>
var data = {"list1":"list-1","list2":"list-2","list3":"list-3","list4":"list-4","list5":"list-5"};
for (list in data ) {
$("#data-list").aTmpl("data-list", data,'replace');
}
</script>
/*Auther : Jimmy
Description : This plugin will replace html variables to javascript value. like it's smarty is working in php
*/
(function(jQuery){
var aTmplCache = {};
var aTmplMethods = {
loadTmpl : function( tmpl ) {
var arr=tmpl.replace(/'/g,"\\'").replace(/[\r\t\n]/g, "").split("<@").join("@>").split("@>");
var str="var retval='';with(obj){";
for(ele in arr)
{
switch(arr[ele].charAt(0))
{
case "%" : str+=arr[ele].replace(/%(.*?)%/g,"$1"); break;
case "=" : str+="retval+="+arr[ele].replace(/=(.*?)$/g,"$1")+";"; break;
case "#" : str+=arr[ele].replace(/#(.*?)$/g,"$1"); break;
case "" : break;
default: str+="retval+='"+arr[ele]+"';";
}
}
str+="}; return retval;";
//console.log(str);
return new Function("obj,idx",str);
},
renderTmpl : function(tmpl,data) {
var fn=null;
var dom='';
var rowcnt=0;
data=(Object.prototype.toString.call(data)!=="[object Array]")?[data]:data;
if(!aTmplCache[tmpl])
aTmplCache[tmpl]=this.loadTmpl(jQuery("script[data-tmpl='"+tmpl+"']").html());
fn = aTmplCache[tmpl];
for(row in data)
{
dom+=fn(data[row],rowcnt++);
}
return dom;
}
};
jQuery.fn.aTmpl = function aTmpl(tmpl,data,method){
switch(method)
{
case 'html':
this.html(aTmplMethods.renderTmpl(tmpl,data));
break;
case 'append':
this.append(aTmplMethods.renderTmpl(tmpl,data));
break;
case 'replace':
this.replaceWith(aTmplMethods.renderTmpl(tmpl,data));
break;
default:
this.html(aTmplMethods.renderTmpl(tmpl,data));
}
};
})(jQuery);
