Handlebars.js模板

Posted niusan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 






以上是关于Handlebars.js模板的主要内容,如果未能解决你的问题,请参考以下文章

Handlebars.js模板

Django 模板中的 Handlebars.js

错误:Handlebars.js 中缺少帮助程序

使用 handlebars.js 模板以数组中的最后一项为条件

使用 handlebars.js 制作“if x in dict(json)”语句

markdown 在使用AJAX呈现的Handlebars.js模板文件上显示平面JSON文件中的数据。