当前位置:  编程技术>WEB前端

jQuery .tmpl() 用法示例介绍

    来源: 互联网  发布时间:2014-08-25

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

动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

如同为解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl,现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里,内置的 demo 也尽情地演示了各种用法。

就我自己的几次使用,感觉很不错,用更加直观方面的 HTML 写法而不是 JavaScript 拼凑 来写结构,然后用 JSON 变量来占位的方式来填充数据,代码看起来好多了。

Tmpl提供了几种tag:

${}:等同于{{=}},是输出变量,通过了html编码的。
{{html}}:输出变量html,但是没有html编码,适合输出html代码。
{{if }} {{else}}:提供了分支逻辑。
{{each}}:提供循环逻辑,$value访问迭代变量。

jquery tmpl的使用方法:

模板定义:

方法一:

 
  • ${Name} (${ReleaseYear})
  • 方法二:

    function makeTemplate(){ 
    var markup='
  • ${Name} (${ReleaseYear})
  • ‘; $.template(“movieTemplate”, markup); }

    DATA:

    var movies = [ 
    { Name: "The Red Violin", ReleaseYear: "1998" }, 
    { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
    { Name: "The Inheritance", ReleaseYear: "1976" } 
    ];

    Script:

    $( "#movieTemplate" ).tmpl( movies ) 
    .appendTo( "#movieList" );

    实例1:

     
     
     
     
     
     
     
    
    
    • =
    • $(function(){ function addParam(key, value) { var param_list = $('.param-list'); var num = param_list.find('li').length; // build a template to clone the current row var built = $('#new-param-tmpl').tmpl({ num: num, key: key || '', value: value || '', }); if (key) param_list.prepend(built); else param_list.append(built); param_list.find('li:not(:last) .add-param').hide(); param_list.find('li:last .add-param').show(); param_list.find('li:not(:last) .remove-param').show(); param_list.find('li:last .remove-param').hide(); } // bind events $('.param-list .remove-param').live('click', function(){ $(this).parent().remove(); return false; }); $('.param-list .add-param').live('click', function(){ addParam(); return false; }); addParam(); })

      实例2

      • ${Name} (${ReleaseYear})
      • var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; // Render the template with the movies data and insert // the rendered HTML under the "movieList" element $( "#movieTemplate" ).tmpl( movies ) .appendTo( "#movieList" );

            
         
         

        您可能感兴趣的文章:

      • jQuery定时器插件 jQuery Timers应用示例
      • jquery打开dialog的简单示例
      • jQuery animate方法定位页面具体位置(示例)
      • jQuery设置input type值示例
      • jquery弹窗代码示例
      • jquery的父子兄弟节点查找示例代码
      • jquery获取第几个元素方法示例 jquery选择器
      • jquery遍历checkbox简单示例
      • jquery动态添加option示例
      • Jquery定时器的简单示例
      • JQuery获取上传文件大小(示例)
      • Jquery在指定DIV加载HTML示例代码
      • jQuery获得内容和属性示例代码
      • jQuery的each终止或跳过示例代码
      • jQuery获得内容和属性方法及示例
      • jquery根据name属性查找示例
      • jQuery find与children方法示例
      • jQuery回车键绑定点击事件示例
      • jQuery 滚动示例插件 kinetic
      • jQuery设置CSS属性(示例)
      • JS与jquery自定义属性用法
      • jQuery setTimeout()函数的用法介绍
      • jQuery :visible 选择器(冒号)的用法
      • JQuery 判断某个属性是否存在hasAttr用法
      • jquery onpropertychange键盘事件用法举例
      • jQuery setTimeout用法总结(实例)
      • Jquery confirm弹出框的用法
      • jquery的focus函数用法示例
      • Jquery中slideToggle()与toggleClass()用法
      • Jquery 过滤器(first,last,not,even,odd)用法举例
      • jquery 字符串切割函数substring的用法说明
      •  
        本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
        本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












      • 相关文章推荐
      • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
      • JQuery下拉框应用示例介绍
      • jquery遍历checkbox介绍
      • Jquery中的层次选择器与find()的区别示例介绍
      • JQuery中阻止事件冒泡几种方式及其区别介绍
      • jquery $.trim()方法使用介绍
      • 关于jquery中全局函数each使用介绍
      • jquery prop的使用介绍及与attr的区别
      • Jquery $.browser判断浏览器信息的方法介绍
      • Jquery 禁用缓存的方法介绍
      • jquery获取颜色在ie和ff下的区别示例介绍
      • jQuery 设置 CSS 属性示例介绍
      • 快速解决jquery之get缓存问题的最简单方法介绍
      • jquery跟js初始化加载的多种方法及区别介绍
      • jquery中map函数与each函数的区别实例介绍
      • jQuery过滤选择器:not()方法使用介绍
      • jquery的trigger和triggerHandler的区别示例介绍
      • jquery中子元素和后代元素的区别示例介绍
      • 快速解决jQuery与其他库冲突的方法介绍
      • JQuery与JS里submit()的区别示例介绍
      • jquery中的on方法使用介绍
      • 通过javascript库JQuery实现页面跳转功能代码
      • jQuery鼠标动画插件 jquery-ahover
      • jQuery概述,代码举例及最新版下载
      • jQuery向导插件 Jquery Wizard Plugin
      • Jquery操作html复选框checkbox:全选,全不选和反选
      • jQuery圆角插件 jQuery Corners
      • jQuery相册插件 jQuery.popeye
      • jQuery UI组件 jQuery UI
      • jQuery右键菜单插件 jQuery ContextMenu
      • jQuery分页插件 Pagination jQuery Plugin


      • 站内导航:


        特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

        ©2012-2021,,E-mail:www_#163.com(请将#改为@)

        浙ICP备11055608号-3