Bootstrap Snippet Javascript Template using HTML Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*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])
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Javascript Template"
Bootstrap 3.3.0 Snippet by jimmyrana

Related: See More

Questions / Comments:

"Javascript Template" Bootstrap 3.3.0 Snippet by jimmyrana

Related: See More

Questions / Comments:

"Javascript Template"
Bootstrap 3.3.0 Snippet by jimmyrana