js模版引擎handlebars.js实用教程——if-判断的基本用法

返回目录

 

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <META http-equiv=Content-Type content="text/html; charset=utf-8">
 5     <title>if-判断的基本用法 - by 杨元</title>
 6   </head>
 7   <body>
 8     <h1>if-判断的基本用法</h1>
 9     <!--基础html框架-->
10     <table>
11       <thead>
12         <tr>
13           <th>姓名</th>
14           <th>性别</th>
15           <th>年龄</th>
16         </tr>
17       </thead>
18       <tbody id="tableList">
19         
20       </tbody>
21     </table>
22     
23     <!--插件引用-->
24     <script type="text/javascript" src="script/jquery.js"></script>
25     <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
26     
27     <!--Handlebars.js模版-->
28     <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->
29     <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
30     <script id="table-template" type="text/x-handlebars-template">
31       {{#each student}}
32         {{#if name}}
33           <tr>
34             <td>{{name}}</td>
35             <td>{{sex}}</td>
36             <td>{{age}}</td>
37           </tr>
38         {{/if}}
39       {{/each}}
40     </script>
41     
42     <!--进行数据处理、html构造-->
43     <script type="text/javascript">
44       $(document).ready(function() {
45         //模拟的json对象
46         var data = {
47                     "student": [
48                         {
49                             "name": "张三",
50                             "sex": "0",
51                             "age": 18
52                         },
53                         {
54                             "sex": "0",
55                             "age": 22
56                         },
57                         {
58                             "name": "妞妞",
59                             "sex": "1",
60                             "age": 18
61                         }
62                     ]
63                 };
64         
65         //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架
66         //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。
67         var myTemplate = Handlebars.compile($("#table-template").html());
68         
69         //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
70         $('#tableList').html(myTemplate(data));
71       });
72     </script>
73   </body>
74 </html>

 

 

     在遍历student时,由于数据缺失,并不是每一个学生都有name属性,我们不想显示没有name属性的学生,这时就需要if来做判断。

     {{#if name}}可以用来判断当前上下文中有没有name属性,实际上,它是尝试去读取name属性,如果返回的为undefined、null、""、[]、false任意一个,都会导致最终结果为假。

     if还支持多层次读取,例如:{{#if name.xxx}},这样写就假设name属性是一个map,检测name属性中是否包含xxx属性。

 

 

 

你可能感兴趣的:(js)