使用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' ...
随机推荐
- git学习——分支
分支 创建分支:git branch 如:git branch testing Git通过HEAD指针知道用户是在哪一个分支上工作. 切换分支用git checkout命令,注意:可以用git sta ...
- 【android相关】【问题解决】R.java文件丢失
在进行android开发过程中,有时候,我们会遇到gen文件中R.java丢失的现象.重新build,或者clean工程,close并重新打开Project,但有时也没解决. 这可能是由于不小心把xm ...
- 使用Nginx+uWSGI+Django方法部署Django程序(下)
在上一篇文章<五步教你实现使用Nginx+uWSGI+Django方法部署Django程序(上)>中,阐述了如何只使用uWSGI来部署Django程序. 当然,单单只有uWSGI是不够的, ...
- php中的 file_get_contents（‘php://input’）用法
php中的 file_get_contents('php://input')用法: file_get_contents 获取php页面中input内容的值: eg: php: 页面提交了usernam ...
- 【BIEE】19_不齐整维和越级维
不齐整维:没有子节点的维度 越级维:层级维度出现断裂,则称为越级维 下图我们就可以清晰的看出: 首先,我们将表导入到资料库做好与事实表的关联后并建立相应维 以下是按照一般维度创建维后的结果 创建完成之 ...
- 从零開始学Java之线程具体解释（1）：原理、创建
Java线程:概念与原理 一.操作系统中线程和进程的概念 如今的操作系统是多任务操作系统.多线程是实现多任务的一种方式. 进程是指一个内存中执行的应用程序.每一个进程都有自己独立的一块内存空间.一个进 ...
- 2d 点云匹配算法
#include "dbtype.h" #include "dbkdtree.h" #include <pcl/point_cloud.h> #in ...
- android studio- Gradle "xxx" project refresh failed
Android Studio每次更新版本都会更新Gradle这个插件,但由于长城的问题每次更新都是失败,又是停止在Refreshing Gradle Project ,有时新建项目的时候报 Gradl ...
- UITabelViewCell自定义(zhuan)
很多时候,我们需要自定义UITableView来满足我们的特殊要求.这时候,关于UITableView和cell的自定义和技巧太多了,就需要不断的总结和归纳. 1.添加自定义的Cell. 这个 ...
- GCD - Extreme (II) for(i=1;i<N;i++) for(j=i+1;j<=N;j++) { G+=gcd(i,j); } 推导分析+欧拉函数
/** 题目:GCD - Extreme (II) 链接:https://vjudge.net/contest/154246#problem/O 题意: for(i=1;i<N;i++) for ...