使用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' ...
随机推荐
- Java ActiveMQ队列模式案例
创建Eclipse项目并运行 创建java project:ActiveMQ-5.14,新建lib文件夹 打开apache-activemq-5.14.0-bin\apache-activemq-5. ...
- Dubbo超时机制导致的雪崩连接
Bug影响:Dubbo服务提供者出现无法获取Dubbo服务处理线程异常,后端DB爆出拿不到数据库连接池,导致前端响应时间异常飙高,系统处理能力下降,核心基础服务无法提供正常服务. Bug发现过程: ...
- javascript - 闭包之一些常见的写法
/** * 防御型分号 */ ; (function () { //code.... console.log('一开始,我自己执行了!!!'); })(); /** * 形参 -> 实参 * 定 ...
- 怎样实现广度优先遍历（BFS）
BFS过程: 一:訪问顶点V,并标记V为已经訪问 二:顶点V入队列 三:假设队列非空.进行运行,否则算法结束 四:出队列取得对头顶点u,假设顶点未被訪问,就訪问该顶点,并标记该顶点为已经訪问 五:查找 ...
- C#异常处理机制初步
原地址:http://www.sudu.cn/info/html/edu/net/20071227/50446.html 一.c#的异常处理所用到关键字 try 用于检查发生的异常,并帮助发送任何可能 ...
- Linux信号（signal) 机制分析（转）
[摘要]本文分析了Linux内核对于信号的实现机制和应用层的相关处理.首先介绍了软中断信号的本质及信号的两种不同分类方法尤其是不可靠信号的原理.接着分析了内核对于信号的处理流程包括信号的触发/注册/执 ...
- XYWi-Fi v2.0 简单的笔记本无线热点分享工具【Win】
[软件名称]XYWi-Fi [版本号]v2.0 [适用系统]Windows 7/8/8.1/10 [功能特性]简单的笔记本无线热点分享工具 [下载地址]pan.baidu.com/s/1mgmOpJi ...
- Android Framework 分析---2消息机制Native层
在Android的消息机制中.不仅提供了供Application 开发使用的java的消息循环.事实上java的机制终于还是靠native来实现的.在native不仅提供一套消息传递和处理的机制,还提 ...
- MySQL和hive对比表结构脚本
#!/bin/bash source /etc/profile runlog='/tmp/zewei/check_schema_log' hive_database_schema=/tmp/hive_ ...
- redhat5.8下oracle11g启动失败
# redhat5.8下oracle11g启动失败 ### 日志文件路径-----------------------------tail -f /u01/app/oracle/product/11. ...