zoukankan      html  css  js  c++  java
  • 使用jQuery+huandlebars遍历数组嵌套数组

    兼容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嵌套 - by 杨元</title>
      </head>
      <body>
        <h1>each嵌套</h1>
        <!--基础html框架-->
        <div id="dataList"></div>
        
        <!--插件引用-->
        <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}}
            {{#each info}}
              {{../name}}的{{this}}<br>
            {{/each}}
          {{/each}}
        </script>
        
        <!--进行数据处理、html构造-->
        <script type="text/javascript">
          $(document).ready(function() {
            //模拟的json对象
             var data = [{
                          "name":"张三",
                          "info":[
                            "眼睛",
                            "耳朵",
                            "鼻子"
                          ]
                        },{
                          "name":"李四",
                          "info":[
                            "爸爸",
                            "妈妈",
                            "妻子"
                          ]
                        }];
            
            //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架
            //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。
            var myTemplate = Handlebars.compile($("#table-template").html());
            
            //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
            $('#dataList').html(myTemplate(data));
          });
        </script>
      </body>
    </html>
  • 相关阅读:
    Bitmap\Bytes\BitmapImage相互转换
    枚举值为什么使用1,2,4,8,16,32等2的幂方(转)
    获取电脑信息
    操作内存的帮助类
    C#调用DLL(整理)
    [原]java集合类TreeMap和TreeSet
    [原]《面试题精选》08.颠倒句子中单词的顺序
    [原]数据结构与对象的区别
    [原]初步了解Hadoop平台
    [原]《程序员面试题精选》06.查找最小的k个元素
  • 原文地址:https://www.cnblogs.com/lengyue0030/p/7423666.html
Copyright © 2011-2022 走看看