使用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' ...
随机推荐
- zbar 解析 图片 二维码 条形码
#!/usr/bin/env python # coding: u8 import os import zbar import Image import urllib import uuid def ...
- 8_陀螺仪MPU6050和PWM控制在STM32F4-Discovery开发板上的实现
非常早曾经就把圆点博士的程序从STM32F103移植到STM32F4_Discovery (STM32F407), battery.陀螺仪和PWM电机控制的程序都已经測试完成,执行有一段时间,正常.以 ...
- 【BIEE】19_不齐整维和越级维
不齐整维:没有子节点的维度 越级维:层级维度出现断裂,则称为越级维 下图我们就可以清晰的看出: 首先,我们将表导入到资料库做好与事实表的关联后并建立相应维 以下是按照一般维度创建维后的结果 创建完成之 ...
- javascript 和 jquery 博客
http://www.cnblogs.com/starof/category/626164.html
- loadrunner使用sitescope监测监控mysql数据库
分类: LoadRunner 性能测试 2012-11-22 00:14 2644人阅读 评论(0) 收藏 举报 loadrunnerLoadRunnermysqlMySQLMysqlMYSQLMyS ...
- Java之旅（2）—反射
1. 概念 反射就是将java类中的各种成分映射成对应的java类.之前我们已经讲过了Class类,也明确了一个java类中用一个Class类的对象来表示,一个类中的组成部分有:成员变量,方法 ...
- 使用 Visual Studio 2012进行C语言开发
1.打开visual studio,选择菜单[文件]->[新建]->[项目],将会弹出新建项目对话框 2.在弹出的新建项目对话框中,选择和填补相应的属性. 3.点击确定之后,会跟着弹出应用 ...
- tcp/ip--IP 协议首部格式与其配套使用的四个协议(ARP,RARP,ICMP,IGMP)
IP 数据报首部 最高位在左边,记为0 bit:最低位在右边,记为31 bit 版本: 占 4 位,指 IP 协议的版本目前的 IP 协议版本号为 4 (即 IPv4) 首部长度: 占4位,可表示的最 ...
- arm linux c++11编译
include(CheckCXXCompilerFlag) CHECK_CXX_COMPILER_FLAG("-std=c++11" COMPILER_SUPPORTS_CXX11 ...
- JAVA代码之RocketMQ生产和消费数据
一.启动RocketMQ [root@master ~]# cat /etc/hosts # Do not remove the following line, or various programs ...