返回目录

  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模版引擎handlebars.js实用教程——if-判断的基本用法的更多相关文章

  1. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  2. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  3. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  4. js模版引擎handlebars.js实用教程——each-基本循环使用方法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  5. js模版引擎handlebars.js实用教程——each-循环中使用this

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  6. js模版引擎handlebars.js实用教程——each嵌套

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  7. js模版引擎handlebars.js实用教程——循环中使用索引

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  8. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  9. js模版引擎handlebars.js实用教程——with-终极this应用

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

随机推荐

  1. 不支持C++11 decltype的噩耗

    前言:因为公司现在使用vs2008,所以很多c++11的新特性还未能使用,导致写了很多冤枉代码. 最初引擎的数学库非常简单,使用起来也不方便,例如: float FastLerp(const floa ...

  2. 如何使用ajax将json传入后台数据

    首先采用jquery内部封装好的方法是比较简单的,我们只需做的就是修改里面的一些配置: 对$.ajax()的解析: $.ajax({ type: "POST", //提交方式 co ...

  3. 国内及Github优秀开发人员列表

    自从入了Android软件开发的行道,解决问题和学习过程中免不了会参考别人的思路,浏览博文和门户网站成了最大的入口.下面这些列表取名为:国内及Github优秀开发人员列表,就是浏览后的成果. 虽然下述 ...

  4. IQD文件模板以及cs7g.ini信息

    COGNOS QUERY STRUCTURE,1,1 DATABASE, cognos TITLE,test BEGIN SQL { select time, city_id, city_name, ...

  5. 给mysql的root用户

    grant all privileges on *.* to 'root'@'%' identified by 'root' with grant option;

  6. allegro中焊盘的设置

    用Cadence的pad designer制作pad的时候会遇到为thermal relief和anti pad设计尺寸的问题 Thermal relief:正规的中文翻译应该叫做防散热PAD.它主要 ...

  7. Xcode自定义Eclipse中常用的快捷键

    转载自http://joeyio.com/2013/07/22/xcode_key_binding_like_eclipse/ Xcode自定义Eclipse中常用的快捷键 22 July 2013 ...

  8. Unity 通过 www 下载 assetbundle , 在 iOS9 设备无法下载的问题

    我们项目是通过 www 下载 Assetbundle 来实现热更新的, 在 iOS 8上一切正常,但在 iOS9 设备上发现无法下载,跟踪调试发现以下错误信息 “App Transport Secur ...

  9. 表格里使用text-overflow后不能隐藏超出的文本的解决方法

          当把text-overflow设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,不过在表格里面使用text-overflow后依旧不能隐藏超 ...

  10. 看到shape文件可以加载到GOOGLE EARTH上的方法，有空可以试试

    引用 Shape文件转为KMZ并在Google Earth中显示 (1)在ArcGIS中加载一个Shape文件,笔者加载的是某个地区的道路(双线道路)图层 (2)在ArcToolbox中,依次展开Co ...