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>Handlebars.js模板
原文地址：http://www.cnblogs.com/niusan/p/7526562.html