兼容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-基本循环使用方法</title>

  </head>

  <body>

    <h1>each-基本循环使用方法</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}}

        <tr>

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

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

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

        </tr>

      {{/each}}

    </script>

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

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

        var data = {

                    "student": [

                        {

                            "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>

Handlebars.js一个重要特性：循环。#each可以理解成循环命令，循环的是json对象中的student属性。对于每次循环，都可以读出里边的name、sex、age属性。

使用jQuery+huandlebars遍历展示对象中的数组的更多相关文章

  1. struts2：遍历自定义字符串数组，遍历Action实例所引用对象中的数组

    在struts2:OGNL表达式,遍历List.Map集合:投影的使用一文中已经讲述了OGNL遍历List.Map集合等功能. 本文简单写一个遍历数组的示范程序. 1. 遍历自定义字符串数组 < ...

  2. 遍历js对象中的属性

    可以使用js自带的for in.也可以使用Ext JS中的方法来遍历js对象中的属性 代码如下: /** 遍历对象 */ var person = {name:'张泰松',age:28}; //js方 ...

  3. 设计模式系列之迭代器模式(Iterator Pattern)——遍历聚合对象中的元素

    模式概述 模式定义 模式结构图 模式伪代码 模式改进 模式应用 模式在JDK中的应用 模式在开源项目中的应用 模式总结 说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修 ...

  4. C# json反序列化 对象中嵌套数组 (转载) 可能会导致循环或多重级联路径。请指定 ON DELETE NO ACTION 或 ON UPDATE NO ACTION，或修改其他 FOREIGN KEY 约束。

    C# json反序列化 对象中嵌套数组 (转载)   看图: 这里可以看到是二层嵌套!!使用C#如何实现?? 思路:使用list集合实现 → 建立类 → list集合 → 微软的   Newtonso ...

  5. JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串

    JS遍历JSON对象 JS遍历JSON对象 <script> var obj = { "goodsid": "01001", "goods ...

  6. jquery之遍历展示title

    //遍历展示title {field:'couponsList',title:'优惠劵类型',width:250,align:'center',sortable:true, formatter:fun ...

  7. 如何向java后台的对象中传数组

    1.后台对象的参数需要是是list对象 /* * copyright : GLOBALROAM Ptd Ltd * VmCreateInfo.java * Author: * zhangpengyan ...

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

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

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

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

随机推荐

  1. Linux下Mysql自启动

    如果你都是按照默认配置安装的那么只要按照如下步骤就可以了 1.cp /usr/local/mysql/support-files/mysql.server /etc/init.d/mysql   将服 ...

  2. [java,2017-12-01] 播放音频文件

    废话不多说,直接上代码 jar包 <!-- 2017-12-01音频播放jar包 --> <dependency> <groupId>javazoom</gr ...

  3. python库myqr生成二维码

    python中有一个好玩的库,不仅可以生成各种花色的二维码,还可以生成动态二维码. MyQR是一个能够生成自定义二维码的第三方库,可以根据需要生成普通二维码.带图片的艺术二维码,也可以生成动态二维码 ...

  4. mysql之pymsql的使用

    # -*- coding:utf-8 -*- import pymysql user = input('请输入用户名:') pwd = input('请输入密码:') # 1.连接 conn = py ...

  5. [Unity插件]Lua行为树(十)：通用行为和通用条件节点

    在行为树中,需要扩展的主要是行为节点和条件节点.一般来说,每当要创建一个节点时,就要新建一个节点文件.而对于一些简单的行为节点和条件节点,为了去掉新建文件的过程,可以写一个通用版本的行为节点和条件节点 ...

  6. gentoo AR9285 BCM57780 安装驱动

    首先使用启动光盘启动, 然后 mount /dev/sda4 /mnt/gentoo 挂载硬盘 lspci -v 1>/mnt/gentoo/root/lspci_v.txt 输出信息到文件. ...

  7. [转] 高频 mos 选择需要考虑相关资料

    节选自 http://www.dianyuan.com/bbs/987183.html [草根大侠]贴 关于MOS管导通内阻和米勒电容(Qgd)差异对效率的影响 http://www.epc.com. ...

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

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

  9. Android 8.0 新特性

    Android 8.0 (Android Oreo(奥利奥))新特性介绍 通知渠道 - Notification Channels 通知渠道是由应用自行定义的通知内容类别,借助渠道,开发者可以让用户对 ...

  10. 【ASP.NET 插件】分享一个可视化HTML编辑器 CKEditor.NET

    因为公司网站的可视化HTML编辑器IE兼容性问题,js报错不能使用,于是在网上找到了个还行的,图片本地上传的话直接把图片拖到编辑窗口就可以了.这个编辑器是在开源中国看到的,个人觉得还不错! CKEdi ...