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

with基本应用

<!DOCTYPE html>

<html>

  <head>

    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <title>with-进入到某个属性(进入到某个上下文环境) - by 杨元</title>

  </head>

  <body>

    <h1>with-进入到某个属性(进入到某个上下文环境)</h1>

    <!--基础html框架-->

    <table>

      <thead>

        <tr>

          <th>姓名</th>

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

          <td>

            {{#with favorite}}

              {{#each this}}

                <p>{{name}}</p>

              {{/each}}

            {{/with}}

          </td>

        </tr>

      {{/each}}

    </script>

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

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

        var data = [

                        {

                            "name": "张三",

                            "sex": "0",

                            "age": 18,

                            "favorite":

                            [

                              {

                                "name":"唱歌"

                              },{

                                "name":"篮球"

                              }

                            ]

                        },

                        {

                            "name": "李四",

                            "sex": "0",

                            "age": 22,

                            "favorite":

                            [

                              {

                                "name":"上网"

                              },{

                                "name":"足球"

                              }

                            ]

                        },

                        {

                            "name": "妞妞",

                            "sex": "1",

                            "age": 18,

                            "favorite":

                            [

                              {

                                "name":"电影"

                              },{

                                "name":"旅游"

                              }

                            ]

                        }

                    ];

        //注册一个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>

with+this应用

<!DOCTYPE html>

<html>

  <head>

    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <title>with-终极this应用 - by 杨元</title>

  </head>

  <body>

    <h1>with-终极this应用</h1>

    <!--基础html框架-->

    <table>

      <thead>

        <tr>

          <th>姓名</th>

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

          <td>

            {{#with favorite}}

              {{#each this}}

                <p>{{this}}</p>

              {{/each}}

            {{/with}}

          </td>

        </tr>

      {{/each}}

    </script>

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

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

        var data = [

                        {

                            "name": "张三",

                            "sex": "0",

                            "age": 18,

                            "favorite":

                            [

                              "唱歌",

                              "篮球"

                            ]

                        },

                        {

                            "name": "李四",

                            "sex": "0",

                            "age": 22,

                            "favorite":

                            [

                              "上网",

                              "足球"

                            ]

                        },

                        {

                            "name": "妞妞",

                            "sex": "1",

                            "age": 18,

                            "favorite":

                            [

                              "电影",

                              "旅游"

                            ]

                        }

                    ];

        //注册一个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中with应用及with+this应用的更多相关文章

  1. jQuery插件中的this指的是什么

    在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...

  2. 详解jquery插件中;(function ( $, window, document, undefined )的作用

    在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...

  3. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

  4. jQuery Mobile 中创建按钮

    在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...

  5. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  6. jquery.cookie中的操作

    http://w3school.com.cn/js/js_cookies.asp jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一 ...

  7. jQuery库中的变量$和其它类库的变量$冲突解决方案

    jQuery.noConflict();//把变量$给其它插件 /* 由于把jQuery插件中的变量$给了其它插件使用 那么在调用jQuery插件的时候只能使用jQuery 但是这样很不方便 1.其实 ...

  8. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

  9. jquery选择器中两个class是什么意思？

    jquery选择器中两个class是什么意思? $(".class1 .class2") 选择class1元素下class2的元素(中间有空格)$(".class1.cl ...

随机推荐

  1. CreateThread给线程函数传递的参数

      HANDLE WINAPI CreateThread ( __in_opt LPSECURITY_ATTRIBUTES lpThreadAttributes, // 指向SECURITY_ATTR ...

  2. nginx配置socket服务

    1.服务器环境:centos7.5 2.安装nginx 首先下载:wget http://nginx.org/download/nginx-1.14.0.tar.gz 解压:tar zxvf  ngi ...

  3. Atom+latex+中文环境

    最近在写论文,的路上.很多idea都受限于官方给的模板不能够添加自己即时的中文idea,所以添加中文到文献中很有必要,这里记录自己添加中文的几个小步骤 1. 受限将atom中的latex packag ...

  4. Centos 安装 python2.7.10以及pip

    安装python2.7.10 1. 下载安装包并解压 wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz tar -xf P ...

  5. java-Set集合、HashSet集合、LinkedHashSet集合和TreeSet集合

    1.Set集合,无索引,不可以重复,无序(存取不一致) public class Demo { public static void main(String[] args) { //demo1(); ...

  6. node day1 login

    https://blog.csdn.net/weixin_33901641/article/details/85967847 vue之node.js的简单介绍 http://nodejs.cn/ ht ...

  7. 编译安装和apt安装Nginx1.14.0

    安装依赖 yum -y install gcc gcc-c++yum -y install zlib zlib-devel openssl openssl-devel pcre-devel 在Ubun ...

  8. uniq的坑坑

    很久没有做过文本统计之类的操作了,今天有点任务弄一下,幸亏机智的我列出了全部看了一遍,发现uniq的时候还是有重复的,然后总结了一下 假如我有1.txt这个文本: 10.0.0.1 10.0.0.1 ...

  9. ubuntu-docker入门到放弃（七）操作系统

    操作系统相信很多人都会装,但是当使用docker容器来安装操作系统的时候,还是跟我们平时安装操作系统有很大区别的,我们之前也下载安装过centos系统,你会发现跟我们之前的操作系统相比,很精简,那么我 ...

  10. 【剑指offer】判断出栈序列是否合法

    输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序列对应 ...