10-if-判断的基本用法

来源：互联网发布：淘宝上的lolita代购编辑：程序博客网时间：2024/05/16 17:34

 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": 1852                         },53                         {54                             "sex": "0",55                             "age": 2256                         },57                         {58                             "name": "妞妞",59                             "sex": "1",60                             "age": 1861                         }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属性。

作者：杨元
欢迎任何形式的转载，但请务必注明出处。

0 0