首页 > 网站 > WEB开发 > 正文

10-if-判断的基本用法

2024-04-27 15:07:33
字体:
来源:转载
供稿:网友
 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属性。

 

 

 

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表