使用jquery-tmpl使JavaScript与HTML分离
背景：由于对JavaScript字符串拼接JavaScript变量产生了反感，也想用用JavaScript模板库，看了几个，由于时间原因选择了jQuery.tmpl.js,因为Visual Studio 对其的语法高亮支持。
0. 下载 jQuery templates plugin
jQuery Templates plugin vBeta1.0.0
1. 准备工作
1.1 JSON数据
JSON数据在这里类似于“接口文档”，明确哪些数据必须对应到HTML的哪个位置，还有一些作为判断条件的字段，可以根据字段不同的值来显示不同的样式；这里采用一段经转换（JSON.parse(/*JSON String*/)）好的数据
var MockResponseFromServer = {
code: '1', // '1'表示获取数据成功
data: [
{
productid: "001",
productname: "Lumia 930",
productnumber: "GD1502001",
productpic: "http://www.globalmediahk.com/uploads/magazine/15/3cc3ca3f-a403-42d9-a850-b9d08c88fd48.jpg",
memberprice: 35,
price: 35,
quantity: 0
},
{
productid: "002",
productname: "Lumia 520",
productnumber: "GD1502002",
productpic: "http://blog.orange.pl/uploads/media/b/9/c/5/3/189d1cfd42952ad73b4d91c4700016151d0",
memberprice: 35,
price: 35,
quantity: 0
}],
msg: '成功'
};
1.2 HTML
HTML 转换为 x-jquery-tmpl,{{}} ,${} {{if}}具体语法请参见插件的示例文档，这些符号在Visual Studio 下有语法高亮
<script id="productItemTmpl" type="text/x-jquery-tmpl">
{{if quantity=== 0}}
<div class="gshow-box gshow-box-disabel">
{{else}}
<div class="gshow-box">
{{/if}}
<div class="gshow-box">
{{if quantity === 0 }}
<div class="disabelPanel"></div>
{{/if}}
<a href="${productDetailUrl}" target="_blank">
<img class="gshow-box-img lazy" data-original="${productpic}" alt="${productname}">
</a>
<a class="g-title" href="${productDetailUrl}" target="_blank">￥${productname}</a>
<div class="clearfix">
<label class="fl">
￥${memberprice}
<span class="discount">￥${price}</span>
</label>
<span class="fr">
共<span class="color-red">${quantity}</span>件
</span>
</div>
</div>
</script>
2. 编写HTML
<body>
<div class="container">
<h1>产品列表</h1>
<hr />
<div id="ProductContainer" class="qg-gshow-temp clearfix">
</div>
</div>
<script src="jquery-1.7.2.js"></script>
<script src="jquery.lazyload.js"></script>
<script src="jquery.tmpl.js"></script>
<script src="IAPP.js"></script>
</body>
3. JavaScript
(function ($) {
var IAPP = {};
IAPP.ProductTmpl = 'ProductTmpl';
IAPP.$ProductContainer = $('#ProductContainer');
function setLazyloadImg() {
/// <summary>
/// 设置图片延迟加载
/// </summary>
$('img.lazy').lazyload({
effect: 'fadeIn'
, failure_limit: 10
, threshold: 50
, event: 'scroll'
});
}
IAPP.loadDataByAjax = function (handler) {
/// <summary>
/// AJAX请求产品JSON数据
/// </summary>
/// <param name="handler">success回调处理函数</param>
$.ajax({
type: 'POST',
url: 'url/getdata.ashx',
data: { cmd: 'productlist' },
dataType: 'json',
success: handler,
error: function () {
// error handler
console && console.info('error:some message');
// 当AJAX请求发生错误时，用模拟数据测试模板
handler(MockResponseFromServer);
}
});
};
IAPP.loadDataByAjaxHandler = function (result) {
/// <summary>
/// 回调函数
/// </summary>
/// <param name="result">response from server</param>
var l = 0, // 用于保存产品的个数
data, // 产品列表（Array）
entityObj; // 用于保存产品实体对象
if (!result) { throw 'no response from server'; }
if (result.code && result.code === '1') {
result.data && (data = result.data);
if (data && data.length) {
l = data.length;
while (l--) {
entityObj = data.shift();
// 产品链接
entityObj['productDetailUrl'] = './product.aspx?pid=' + entityObj.productid;
$.tmpl(IAPP.ProductTmpl, entityObj).appendTo(IAPP.$ProductContainer);
}
setLazyloadImg(); // 延迟加载
}
} else {
console && console.error(result.msg);
}
};
({
initTmpl: function () {
/// <summary>
/// 初始化jQuery.tmpl
/// </summary>
// $.template(name/*模板名称*/,tmpl/*模板字符串*/)
// 说明：使用此方式可以根据模板名访问模板以达到复用模板
$.template(IAPP.ProductTmpl, $('#productItemTmpl').html());
},
initData: function () {
/// <summary>
/// 获取数据
/// </summary>
IAPP.loadDataByAjax(IAPP.loadDataByAjaxHandler);
}, init: function () {
/// <summary>
/// 所有的初始化动作
/// </summary>
this.initTmpl();
this.initData();
}
}).init();
}(jQuery));
使用jquery-tmpl使JavaScript与HTML分离的更多相关文章
- 让jquery.tmpl.js支持index序号
在写Web程序时,想简单处理会使用JS模板,常用的是Jquery的jquery.tmpl.js插件.整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法. 本次文章想分享的一点是其中的一 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
- jquery tmpl 详解
官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...
- MVC - 11（下）jquery.tmpl.js +ajax分页
继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...
- JQuery.tmpl()的用法
动态请求数据来更新页面是现在非常常用的方法,现在通过Ajax请求返回的数据更多的是json对象, 为了解决js动态拼接数据这方面的问题,JavaScript 也可以利用模版来解决这些问题,比如基于 j ...
- jQuery .tmpl() 用法
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
- jquery.tmpl.min.js--前端实现模版--数据绑定--详解
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
随机推荐
- vue总结介绍
转自(https://zhuanlan.zhihu.com/p/23078117) 模板语法 Vue 提供了一堆数据绑定语法. {{ text }} 文本插值 <div v-html=" ...
- IE8兼容<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
转自:http://nicyea.iteye.com/blog/719007 前言 X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与 conten ...
- QQ和微信凶猛成长的背后：腾讯网络基础架构的这些年
本文来自腾讯资深架构师杨志华的分享. 1.前言 也许没有多少人记得2004年发生的事情.但对于老腾讯来说,14年前的那个日子,2004年6月16日永远难以忘怀.这一天,QQ诞生5年后的腾讯在香港联交所 ...
- How to manually remove an infected file from your computer
http://blog.csdn.net/pipisorry/article/details/41258577 How to manually remove an infected file from ...
- curl Error : maximum redirects followed , 这种问题的一种原因 .
在stack overflow 上查找到有些网站上需要返回一些cookie的,所以当我们curl当相应的网站时,必须要将返回的cookie保存起来. $cookie = tempnam (" ...
- DropFileName = "svchost.exe" 问题解决方案
1.至以下链接处下载ATTK扫描工具: http://support.trendmicro.com.cn ... stomizedpackage.exe (32位) http://support.tr ...
- OPPO.1107刷机笔记
手动 转移任意APP为系统APP的方法流程简述 宗旨: 保持和系统原本同目录下的文件各种设置(权限,所有者,SE上下文),目录结构保持一致即可! 从 /data/app/里将对应的APP文件移动到 / ...
- Atitit. Async await 优缺点 异步编程的原理and实现 java c# php
Atitit. Async await 优缺点 异步编程的原理and实现 java c# php 1. async & await的来源1 2. 异步编程history1 2.1. 线程池 2 ...
- 【转载】Highcharts使用指南
另附几个较好的图形组件库: 基于HTML5的开源画图组件:http://www.ichartjs.com/gettingstarted/ 图表Echarts: http://echarts.baidu ...
- 初识Quartz（二）
简单作业: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 package quartz_pr ...