兼容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. webapp js与安卓，ios怎么交互

    ) } } export default { callhandler (name, data, callback) { setupWebViewJavascriptBridge(function (b ...

  2. 统计php-fpm内存占用

    查看php-fpm的内存占用 1.查看php-fpm的进程个数 ps -ef |grep "php-fpm"|grep "pool"|wc -l 2.查看每个p ...

  3. Python 学习之路的前言

    做为一个编程小白,除了大三的时候考了VB的二级之后,就在也没有接触过其它有关计算机之类的知识.考入材料的研究生之后,越来越觉得自己不想继续这个行业,选择计算机作为自己以后要走的路,所下的决心所用的时间 ...

  4. pc端 添加购物车示例

    添加到购物车列表及相关商品推荐. <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. fixed 相对于父容器定位

    当一个元素设置为 fixed 或 absolute,不设置 top, left 则会在原位置,而脱离文档流,别的元素可以存在于它之后. 而当使用 fixed 后还想相对于父容器进行定位,或者说在当前位 ...

  6. tomcat接口调用时延开关

    项目中有些页面时延不稳定,需要看每次接口调用时延,怎么看,有两种方法:一种是直接去catalina.out日志中看,一种是直接去localhost_access_log日志中看,第一种需要在代码中实现 ...

  7. xtrabackup的执行过程

    XtraBackup的执行过程 执行全量备份过程中对数据库进行的操作https://www.cnblogs.com/digdeep/p/4946230.html 可以看出执行xtrabackup进行全 ...

  8. nginx gzip配置

    参考: https://docs.nginx.com/nginx/admin-guide/web-server/compression/ server { gzip on;    gzip_types ...

  9. WIN7 WIN10赋予文件或者文件夹完全访问权限

    WIN7 WIN10赋予文件或者文件夹完全访问权限win7文件夹图标中多了一把小锁打不开文件夹怎么办?解决办法一:右击目录→取得管理员权限!该方法适用于win7旗舰版.解决办法二:添加everyone ...

  10. [UE4]Throbber，横向动态图标

    一.Throbber跟Circular Throbber一样,都是用来提示玩家后台有数据正在加载中. 二.Throbber是横向显示动态图标.其他方面跟Circular Throbber一样.Circ ...