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属性。
作者：杨元 欢迎任何形式的转载，但请务必注明出处。
转载请注明原文地址: https://ju.6miu.com/read-663748.html
