Handlebars.js模板
1，Handlebars是一个很好的前后端的分离的方案。通过对view和data的分离来快速构建Web模板。优点：在js中避免写入html代码，可读性好，易维护。
2，常用属性:
{{home }}
{{#if birth}} {{/if}} 判断
each {{#each arr}} {{this}} {{/each}} 遍历
with {{#with arr}} {{#each this}} {{this}} {{/each}} {{/with}}
{{!----}} 注释
{{@index}} 下标
自定义标签 registerHelper
3,
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Handlebars的使用</title> 6 <style> 7 .card { 8 font-size: 30px; 9 float: left; 10 margin:20px; 11 background-color: #dadada; 12 } 13 </style> 14 <script id="card-template" type="text/x-handlebars-template"> 15 {{#each this }} 16 <div class="card"> 17 <div>{{chinese @index}}</div> 18 <div>姓名:{{name}}</div> 19 {{#if birth}} 20 <div>出生日期：{{birth}}</div> 21 {{/if}} 22 <div>出生地点:{{home}}</div> 23 <div>职业：{{job}}</div> 24 {{!-- //循环arr --}} 25 <ul> 26 {{#each arr }} 27 <li 28 {{#isfirst @index}} style="color:red;" {{/isfirst}} 29 {{#isblue ../arr}} style="color:blue;" {{/isblue}}> 30 {{addone @../index}}-{{addone @index}} {{ this }} 31 </li> 32 {{/each}} 33 </ul> 34 {{!-- 35 <ul> 36 {{#with arr}} 37 {{#each this}} 38 <li>{{addone @../index}}-{{addone @index}} {{ this }}</li> 39 {{/each}} 40 {{/with}} 41 </ul> 42 --}} 43 </div> 44 {{/each}} 45 </script> 46 </head> 47 <body> 48 <div id ="card"> 49 </div> 50 </body> 51 <script src="./jquery.min.js"></script> 52 <script src="./handlebars-v4.0.10.js"></script> 53 <script> 54 var data = [{ 55 name:'张三', 56 birth:'1992.09.11', 57 home:'北京', 58 job:'打杂的', 59 arr:['1111','222','333','444'] 60 },{ 61 name:'张八', 62 birth:'1992.09.11', 63 home:'河北', 64 job:'搬砖的', 65 arr:['1111','2222','3333','4444'] 66 }, 67 { 68 name:'张三丰', 69 home:'武当山', 70 job:'教人打架的' 71 } 72 ]; 73 74 Handlebars.registerHelper('chinese',function (value) { 75 var chinese = ['第一个','第二个','第三个']; 76 return chinese[value]; 77 }); 78 Handlebars.registerHelper('addone',function (value) { 79 return value+1; 80 }); 81 //arr 里面的第一个数字变成红色 82 Handlebars.registerHelper('isfirst',function (value,options) { 83 if(value==0){ 84 return options.fn(this); 85 } 86 }); 87 //arr 第二个变成蓝色 88 Handlebars.registerHelper('isblue',function (value,options) { 89 if(value&& value.length>2){ 90 return options.fn(this); 91 } 92 }); 93 var t = $('#card-template').html(); //html模板 94 var f = Handlebars.compile(t);//预编译模板 95 var h = f(data); 96 $('#card').html(h); 97 </script> 98 </html>
