背景：由于对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分离的更多相关文章

  1. 让jquery.tmpl.js支持index序号

    在写Web程序时,想简单处理会使用JS模板,常用的是Jquery的jquery.tmpl.js插件.整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法. 本次文章想分享的一点是其中的一 ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. 最新的jQuery插件和JavaScript库

    每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...

  4. jquery tmpl 详解

    官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...

  5. MVC - 11（下）jquery.tmpl.js +ajax分页

    继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...

  6. JQuery.tmpl()的用法

    动态请求数据来更新页面是现在非常常用的方法,现在通过Ajax请求返回的数据更多的是json对象, 为了解决js动态拼接数据这方面的问题,JavaScript 也可以利用模版来解决这些问题,比如基于 j ...

  7. jQuery .tmpl() 用法

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  8. jquery.tmpl.min.js--前端实现模版--数据绑定--详解

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  9. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

随机推荐

  1. Node.js meitulu图片批量下载爬虫1.03版

    //====================================================== // https://www.meitulu.com图片批量下载Node.js爬虫1. ...

  2. Unity3D教程宝典之Web服务器篇:(第三讲)PHP的Hello World

    转载自风宇冲Unity3D教程学院 引言:PHP是比较简单的编程语言,即使没接触过的也可以现学现用.PHP教程文档PHP100视频教程                           Unity接 ...

  3. grid 布局 设置行列间距

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. Android-LinearLayout布局技巧(二)

    先来看看图: 布局代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  5. C#运用反射调用其他程序集中的代码

    加载程序集 AssMedicalAdvice = Assembly.LoadFrom(Path.Combine(Environment.CurrentDirectory, "Inscript ...

  6. WP8简单的计算器

    <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinition ...

  7. android-数据库SQLite相关

    android平台下的SQLite数据库是一种轻量级数据库,支持标准的SQL语句. 本文将介绍 android数据库的创建 利用sql语句对数据库增删改查 系统api数据库增删改查 数据库的事务 1, ...

  8. window安装rabbitmq

    Rabbit MQ 是建立在强大的Erlang OTP平台上,因此安装Rabbit MQ的前提是安装Erlang.通过下面两个连接可以下载安装最新的版本: 下载并安装Eralng OTP For Wi ...

  9. 辛星浅析Linux中的postfix

    Postfix是眼下Linux下主流的邮件server,也就是MTA,主要用来实现SMTP协议,它能够兼容sendmail.而postfix也是为了改进sendmail而制作产生的. 通常来说.pos ...

  10. iOS开发UITableViewCell的选中时的颜色设置(转)

    iOS开发UITableViewCell的选中时的颜色设置   1.系统默认的颜色设置 //无色 cell.selectionStyle = UITableViewCellSelectionStyle ...