兼容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>each-循环中使用this - by 杨元</title>

  </head>

  <body>

    <h1>each-循环中使用this</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 this}}

        <tr>

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

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

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

        </tr>

      {{/each}}

    </script>

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

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

        var data = [

                        {

                            "name": "张三",

                            "sex": "0",

                            "age": 18

                        },

                        {

                            "name": "李四",

                            "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遍历数组的更多相关文章

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

    兼容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通过遍历数组给checkbox赋默认值

    需求:有一个数组:(北京菜,粤菜),checkbox如下: 现在想通过遍历这个数组,使数组里包含的值,在checkbox选中 代码: var flavors = new Array([北京菜 , 粤菜 ...

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

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

  5. 使用jQuery+huandlebars遍历中if判断

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

  6. jquery里遍历普通数组和多维数组的方法及实例

    jquery里遍历数组用的是$.each,下面站长给大家几个具体的实例: 实例1.遍历一个普通的一维数组: 1 2 3 4 5 6 7 8 <script> //声明数据有下面两种方式 / ...

  7. 原生js使用forEach()与jquery使用each遍历数组，return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  8. jquery遍历数组与筛选数组的方法

    grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第 ...

  9. jquery 遍历 数组1

    使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...

随机推荐

  1. Linux内核学习笔记二——进程

    Linux内核学习笔记二——进程   一 进程与线程 进程就是处于执行期的程序,包含了独立地址空间,多个执行线程等资源. 线程是进程中活动的对象,每个线程都拥有独立的程序计数器.进程栈和一组进程寄存器 ...

  2. 迭代器&可迭代对象

    迭代器 能够被next调用, 并不断返回值的一个对象惰性排序, 一次只获取一个数据, (占用一个空间)迭代器可以遍历无限量的数据 特点: 1.惰性序列, 节省内存 2.遍历使用next, 方向不可逆 ...

  3. mac gcc develop

    1:check version gcc -v   /   g++ -v 2:compile gcc *.c   / g++ *.cpp outfile: a.out 3:excute ./a.out ...

  4. Android图片变形，ImageView属性的设置。

    <ImageView android:id="@+id/iv" android:layout_width="match_parent" android:l ...

  5. Java捕获异常的问题

    ---恢复内容开始--- 在Java编译过程中,有时候会出现输入未按照规定输入的情况,此时需要警告用户输入错误,这就会是程序运行过程中出现异常.异常就是可预测但是又没办法消除的一种错误.所以在编写过程 ...

  6. Fiddler设置抓取https请求

    环境准备 1.安装最新版本的Fiddler程序 官网地址:https://www.telerik.com/fiddler 本文写的时候,fiddler最新的版本为5.0 2.安装fiddler证书生成 ...

  7. mongodb对数据的增删改查

    数据类型 下表为MongoDB中常用的几种数据类型: Object ID:文档ID String:字符串,最常用,必须是有效的UTF-8 Boolean:存储一个布尔值,true或false Inte ...

  8. Django之视图Views

    视图 视图接受Web请求并且返回Web响应 视图就是一个python函数,被定义在views.py中 响应可以是一张网页的HTML内容,一个重定向,一个404错误等等 响应处理过程如下图: URLco ...

  9. CentOS7最小化安装-Linux-1

    CentOS 7的安装其实很简单,主要是网络配置. 选英文.设置时区等 最小化安装 先启动一个网络 Begin 吧 在安装的时候设置好root密码.很简单 别去点安装tools. 等待安装完成后,点击 ...

  10. if、else、elif

    if后面+判断条件 elif后面+判断条件 else 否则进行某些操作 举个列子 1 a = raw_input(">>>") 2 if a == "h ...