使用jQuery+huandlebars中with应用及with+this应用
兼容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应用的更多相关文章
- jQuery插件中的this指的是什么
在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...
- 详解jquery插件中;(function ( $, window, document, undefined )的作用
在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
- jQuery Mobile 中创建按钮
在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
- jquery.cookie中的操作
http://w3school.com.cn/js/js_cookies.asp jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一 ...
- jQuery库中的变量$和其它类库的变量$冲突解决方案
jQuery.noConflict();//把变量$给其它插件 /* 由于把jQuery插件中的变量$给了其它插件使用 那么在调用jQuery插件的时候只能使用jQuery 但是这样很不方便 1.其实 ...
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- jquery选择器中两个class是什么意思？
jquery选择器中两个class是什么意思? $(".class1 .class2") 选择class1元素下class2的元素(中间有空格)$(".class1.cl ...
随机推荐
- git 本地重命名文件夹大小写并提交到远程分支
git branch 查看本地分支 git branch -a 查看本地 本地分支可直接切换:git checkout name 进入正题: 1.文件夹备份 2.git config core.ign ...
- PHP之缓存雪崩，及解决方法（转）
一.什么是缓存雪崩缓存雪崩就是指缓存由于某些原因(比如 宕机.cache服务挂了或者不响应)整体crash掉了,导致大量请求到达后端数据库,从而导致数据库崩溃,整个系统崩溃,发生灾难. 下面的就是一个 ...
- 洛谷P1605：迷宫（DFS）
题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫中移动有上下左右 ...
- Day 14 三元运算符，列表推导式，内置函数
三目运算符 ```python# 三目(元)运算符:就是 if...else...语法糖# 前提:简化if...else...结构,且两个分支有且只有一条语句# 注:三元运算符的结果不一定要与条件直接 ...
- [蓝桥杯]PREV-8.历届试题_买不到的数目
问题描述 小明开了一家糖果店.他别出心裁:把水果糖包成4颗一包和7颗一包的两种.糖果不能拆包卖. 小朋友来买糖的时候,他就用这两种包装来组合.当然有些糖果数目是无法组合出来的,比如要买 颗糖. 你可以 ...
- [蓝桥杯]ALGO-185.算法训练_Trash Removal
题目描述: 代码如下: #include <algorithm> #include <cstdio> #include <cstdlib> #include < ...
- 解决Ubuntn安装中文语言包却不能切换
记一次奇葩的经历吧,第一次在VM中安装Ubuntn16.04安装完成后的确出现了语言包安装提示,就这样毫无压力的一直用着中文版的Ubuntn. 习惯了一段时间后第二次安装一样的安装方式却始终是英文界面 ...
- redis5.0.4 集群搭建
准备工作用两台虚拟机模拟6个节点,一台机器3个节点,创建出3 master.3 salve 环境. redis 采用 redis-5.0.4 版本. 两台虚拟机都是 CentOS ,一台 CentOS ...
- [UE4]Expandable Area可展开的区域
一.Expandable Area控件分成头部和主体部分,头部和主体都是一个Named Slot,可以放置任何控件进去,点击头部会因此主体部分 1.如果勾选Size To Content,则收起的时候 ...
- 2th Dec 2018
北京的冬天越来越冷了,是那种钻进骨头里的冷.果,爸爸又走了.每次离开都格外的难受,这种感觉是加剧的,一次比一次强烈.走的时候,你一脸的不高兴,能感觉出来你的不开心,你勉强让爷爷从我怀里面接过去.3个半 ...