兼容ie8（很实用，复制过来，仅供技术参考，更详细内容请看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）

<!DOCTYPE html>

<html>

  <head>

    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <title>if-判断的基本用法 - by 杨元</title>

  </head>

  <body>

    <h1>if-判断的基本用法</h1>

    <!--基础html框架-->

    <table>

      <thead>

        <tr>

          <th>姓名</th>

          <th>性别</th>

          <th>年龄</th>

        </tr>

      </thead>

      <tbody id="tableList">

      </tbody>

    </table>

    <!--插件引用-->

    <script type="text/javascript" src="script/jquery.js"></script>

    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

    <!--Handlebars.js模版-->

    <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->

    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->

    <script id="table-template" type="text/x-handlebars-template">

      {{#each student}}

        {{#if name}}

          <tr>

            <td>{{name}}</td>

            <td>{{sex}}</td>

            <td>{{age}}</td>

          </tr>

        {{/if}}

      {{/each}}

    </script>

    <!--进行数据处理、html构造-->

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

        var data = {

                    "student": [

                        {

                            "name": "张三",

                            "sex": "0",

                            "age": 18

                        },

                        {

                            "sex": "0",

                            "age": 22

                        },

                        {

                            "name": "妞妞",

                            "sex": "1",

                            "age": 18

                        }

                    ]

                };

        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架

        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。

        var myTemplate = Handlebars.compile($("#table-template").html());

        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

        $('#tableList').html(myTemplate(data));

      });

    </script>

  </body>

</html>

使用jQuery+huandlebars遍历中if判断的更多相关文章

  1. 使用jQuery+huandlebars遍历if判断不足引用helper

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  2. 使用jQuery+huandlebars遍历展示对象中的数组

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  3. 使用jQuery+huandlebars循环中索引(@index)使用技巧(访问父级索引)

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  4. 使用jQuery+huandlebars遍历数组嵌套数组

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  5. 使用jQuery+huandlebars遍历数组

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  6. 用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中，并返回第一次出现的位置（找不到返回 -1）

    用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中,并返回第一次出现的位置(找不到返回 -1) 例子: a='12';b='1234567'; // 返回 0 a='47';b='1234 ...

  7. js/jQuery使用过程中常见问题

    目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...

  8. js/jQuery使用过程中常见问题/已踩过的坑大杂烩

    目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...

  9. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

随机推荐

  1. Git源码安装 Linux指定安装目录

    1.安装依赖包 $ yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel 2.下载最新版源码包https: ...

  2. springboot2.1.3.RELEASE+jsp笔记war部署tomcat

    springboot+jsp <packaging>war</packaging> <parent> <groupId>org.springframew ...

  3. oracle 简单crud

    -- 商品表 -- CREATE TABLE "SCOTT"."GOODS" ( "id" NUMBER NOT NULL, "n ...

  4. Yii2项目高级模版 三个模块在同一个目录下的重定向配置

    最近做项目用到的,非常好用. 修改 advanced/backend/config/main.PHP 文件如下: return [ 'homeUrl' => '/admin', 'compone ...

  5. vs2017 打开cs文件提示无法识别的GUID格式

    总结一句话 no zuo no die. 是我自己在注册表中给vs增加了自动以管理员身份运行,把值给错了,弄成了 ~ RUNASADMIN WIN7RTM, 改成 ~ RUNASADMIN 后OK.还 ...

  6. tomcat访问错误调试方法

    生产环境中经常用到tomcat,所以还是要学一下tomcat的排错的 很重要的一点,就是实时查看catalina.out日志 执行tail -f catalina.out就会实时刷新日志了 catal ...

  7. 11g R2 RAC 虚拟机

    虚拟机安装RAC文档 本文档包含内容 一:安装系统 二:各节点配置系统参数 三:虚拟机创建共享存储 四:配置磁盘绑定 五:安装GRID 六:创建ASM DG 七:安装database 八:安装碰到的问 ...

  8. CenterOS7.5中搭建wordpress

    centeros7.5中搭建wordpress 1.环境 云平台:华为云 服务器操作系统:CentOS7.: 博客部署的服务器:Apache HTTP: 数据库:mysql: 框架:wordpress ...

  9. 深度图从ros数据类型转换成opencv数据类型

    摘要:ros下,利用realsense D435采集深度图,并将其转换成opencv的数据类型. 一. RGBD图像采集 通过image_transport包,根据给定的采集速度从realsense ...

  10. jstack命令定位java程序CPU利用率高的代码位置

    高手是怎么使用jstack精确找到异常代码的(java程序CPU利用率高的情况) 请jstack神器来帮忙 本文介绍Linux环境下使用jstack定位问题的秘笈1.[top命令]找到CPU利用率持续 ...