兼容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. 2018/11/5 每日分析-test

    郑醇1901,M30向上一笔中,只是看起来不太值得做,主要因为现在30分钟向上一笔空间无法判定,未必能上去(M5中枢如果向上突破并且不背驰才可能有机会:如果直接下去或者向上后背驰,那么这里就只是一个M ...

  2. 02-创建String对象

    创建一个String对象实在是太简单了,就是因为简单,所以有很多java程序员做了好几年的开发,也没有注意这些小细节问题 String字符串的本质就是char数据对象, 那么char[0]数组当中的一 ...

  3. Shiro ini配置

    Shiro.ini配置: ini配置文件类似Java中的properties(key = value),不过提供了key/value分类的特性,每个部分的key不重复即可 在eclipse中设置打开方 ...

  4. Java 7-Java 循环结构 - for, while 及 do…while

    Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...

  5. day25类的组合多态封装

    类的组合多态与封装类的组合 1. 什么是组合  组合指的是某一个对象拥有一个属性,该属性的值是另外一个类的对象 2. 为何要用组合  通过为某一个对象添加属性(属性的值是另外一个类的对象)的方式,可以 ...

  6. ios自动监测更新

    http://blog.csdn.net/davidsph/article/details/8931718

  7. tornado运行提示OSError: [WinError 10048] 通常每个套接字地址(协议/网络地址/端口)只允许使用一次。

    找到占用端口的进程,kill掉 netstat -ano | find $(port) kill: tskill $(PID)

  8. 47.纯 CSS 创作一个蝴蝶标本展示框

    html,body{ margin:; padding:; } body{ height: 100vh; display: flex; justify-content: center; align-i ...

  9. IIS编辑器错误信息：CS0016解决方案

    错误信息: 运行asp.net程序时候,编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporar ...

  10. twisted的installReactor()函数

    #twisted的安装反应堆函数def installReactor(reactor): """ Install reactor C{reactor}. @param r ...