兼容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. 6.移动端App安装包的测试用例

    安装 安装手册是否规范,是否简洁,是否通俗易懂. 安装手册是否齐全,正确,有改动时,文档是否同步更新 直接复制安装程序到电脑上,能否正常安装 按安装手册给出的步骤进行安装,安装是否正确 查看在安装过程 ...

  2. box-shadow做出一条线两种颜色

    今天同事问我一个问题,说下图的效果是怎么实现的 我当时想都没有想说这不就是两条线嘛,他说是一条线用box-shadow做出来的,之前也没有遇到过,觉得很有意思就试了一把. 语法 box-shadow: ...

  3. Makefile 中 -rpath -rpath-link

    -rpath和-rpath-link 假设有3个文件,在同一目录下,有这样的依赖关系 test->liba.so->libd.so 如果编译test的时候这样写 gcc test.c –l ...

  4. 链接属性external的使用

    //demo1.c #include<stdio.h> ; //static int x = 10; void print(void) //static void print(void) ...

  5. 本地Debug Asp.net MVC 无法加载css与js

    运行一个从网上download的一个MVC项目,运行的时候无法显示样式,js也报错. 检查路径也没有问题,后来在配置中把其中的一段配置去掉 <staticContent> <!-- ...

  6. Linux命令学习之路——文档连接创建:ln

    使用权限:所有角色 使用方式:ln [ -options ] source target 作用:建立源文件与目标文件之间的连接 注意点: 1.连接分为硬连接和软连接,其中硬连接不能对目录做硬连接,且不 ...

  7. CSS精简工具——除去多余的css样式

    有时候开发网页中在改版之后,存在很多无意义的样式,对于后期的管理和维护很不友好. 如果手动去删除,很可能会导致出现更混乱的问题. 最近找到一个Chrome插件,CSS remove and combi ...

  8. Twitter的雪花算法（snowflake）自增ID

    前言 这个问题源自于,我想找一个分布式下的ID生成器. 这个最简单的方案是,数据库自增ID.为啥不用咧?有这么几点原因,一是,会依赖于数据库的具体实现,比如,mysql有自增,oracle没有,得用序 ...

  9. Delphi操作剪贴板

    Windows使用剪贴板观察器和观察链.剪贴板观察器是一个显示剪贴板当前内容的窗口.            通常它应该至少能显示三种普通格式的内容:文字CF_TEXT.位图CF_BITMAP.元文件C ...

  10. Idea中重建maven模块，dependencies引入为空的解决办法

    使用idea开发Maven项目时, Maven项目中有些模块被删除了,重新加入相同名字的模块时,dependencies为空 如下图 正常引进的项目,dependencies应如下 解决办法: ide ...