使用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' ...
随机推荐
- ajax不运行success回调而是运行error回调
调试代码遇到一个问题,就是前台运行删除操作后,controller返回数据,但前台接收时,ajax不运行success回调,总是弹出失败的对话框.接收数据类型是json. 先看看我的前台代码. if ...
- JAVA学习笔记 -- 多线程之共享资源
在多线程程序执行过程中,可能会涉及到两个或者多个线程试图同一时候訪问同一个资源.为了防止这样的情况的发生,必须在线程使用共享资源时给资源"上锁",以阻挡其他线程的訪问. 而这样的机 ...
- Windows正在使用无法停止通用卷怎么办
最后解决方案1: 1.双击任务栏上的安全删除硬件图标 2.按下Ctrl + Alt + Del 组合键调出"任务管理器": 3.结束其中的explorer.exe进程,此时桌面上的 ...
- 微信团队分享：iOS版微信的高性能通用key-value组件技术实践
本文来自微信开发团队guoling的技术分享. 1.前言 本文要分享的是iOS版微信内部正在推广和使用的一个高性能通用key-value 组件的技术实践过程,该组件在微信内部被命名为MMKV(以下简称 ...
- openerp config file
[options] addons_path = /bin/openerp/addonsadmin_passwd = admincsv_internal_sep = , db_host = False ...
- 关于窗体跟随与 PointToScreen
今日写一段测试代码,实现的功能是,当一个输入框获得焦点时,某个帮助窗体跟随在其下方显示.代码很简单,本来没有什么值得一提的.但实验的时候发现,有些控件能较好地跟随,但有些不能,而且距离十分远. 主要代 ...
- 流水线策略 相关算法 Tomasulo算法与记分牌调度算法
设计流水线策略时,可参考 Tomasulo算法与记分牌调度算法 (这两个是霍老师推荐的算法,自己未了解过)
- 带圈圈的数字1~50，求50以上，不要word的
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿
- asp.net 复习总结
1.asp.net页面上格式化时间是:<%# Eval("jsBianhao", "{0:yyyy/MM/dd}")%>
- J2EE的体系架构——J2EE
J2EE是Java2平台企业版(Java 2 Platform,Enterprise Edition),它的核心是一组技术规范与指南,提供基于组件的方式来设计.开发.组装和部署企业应用.J2EE使用多 ...