兼容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. 【leetcode】438. Find All Anagrams in a String

    problem 438. Find All Anagrams in a String solution1: class Solution { public: vector<int> fin ...

  2. 【转】使用Mybatis时遇到的延迟加载造成返回异常的问题——HttpMessageConversionException: Type definition error

    在使用Mybatis的过程中,使用了resultMap延迟加载. 延迟加载:association联表查询的过程中,查询另外两个表的对象.而延迟加载是指只有在使用这两个对象的时候才会进行查询. 问题的 ...

  3. C++程序设计-面向对象

    1-1面向对象初探 变量也是Object Data: the properties  or status; is the core Operations: the functions对外能提供的服务, ...

  4. Python学习之路基础篇--02Python基础+小作业

    1 变量 变量就是将一些运算的中间结果暂存到内存中,以便后续代码调用.必须由数字,字母,下划线任意组合,且不能数字开头.不能是python中的关键字,如['and', 'as', 'assert', ...

  5. Centos7安装mysql5.6.29shell脚本

    创建脚本mysql.sh,直接运行sh mysql.sh #!/bin/bash if [ -d /software ] ;then cd /software else mkdir /software ...

  6. HTTPS协议加密原理解析

    用 HTTP 协议,看个新闻还没有问题,但是换到更加严肃的场景中,就存在很多的安全风险.例如你要下单做一次支付,如果还是使用普通的 HTTP 协议,那你很可能会被黑客盯上. 比如,你发送一个请求,说我 ...

  7. Xtrabackup的安装与使用

    Xtrabackup的安装与使用 1. XtraBackup 简介 XtraBackup(PXB) 工具是 Percona 公司用 perl 语言开发的一个用于 MySQL 数据库物理热备的备份工具, ...

  8. php微服务框架 PHP-MSF 的容器部署和使用

    评论:1 · 阅读:8412· 喜欢:1 一.需求 PHP-msf 是 Carema360 开发的 PHP 微服务框架,目前我没有实际用过,但是市面上的微服务框架要么在推崇 Spring 系,要么是  ...

  9. 【java】接口

    class :用于定义类interface:用于定于接口 接口定义时,特点:1.接口中常见定义:常亮和抽象方法2.接口中的成员都有固定修饰符(如果没有会被隐式添加) 常量:public static ...

  10. C#编程经验-enum and struct

    enum,store fixed values,use array replace,not use this data-structurestruct,store several variables, ...