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

Tmpl提供了几种tag:

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

jquery tmpl的使用方法:
模板定义:
${}为json的键的值,必须要填写正确,和<%#Eval()%>这个作用一样

先设置好模板:

  1. <script id="movieTemplate" type="text/x-jquery-tmpl">
  2. <li>
  3. <b>${Name}</b> (${ReleaseYear})
  4. </li>
  5. </script>

再看数据源:

  1. var movies = [
  2. { Name: "The Red Violin", ReleaseYear: "" },
  3. { Name: "Eyes Wide Shut", ReleaseYear: "" },
  4. { Name: "The Inheritance", ReleaseYear: "" }
  5. ];

最后Script 代码:

  1. <script src="/js/jquery.tmpl.min.js"></script>
  2.  
  3. $( "#movieTemplate" ).tmpl( movies ) //获得替换占位符后的值
  4. .appendTo( "#movieList" );

JQuery.tmpl()的用法的更多相关文章

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

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

  2. jquery tmpl 详解(转)

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

  3. Jquery tmpl详解

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

  4. jQuery .tmpl() 用法

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

  5. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  6. jQuery tmpl用法总结

    之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.archive.org/ ...

  7. jquery tmpl 详解

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

  8. [转载]jquery tmpl使用方法

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

  9. jQuery .tmpl(), .template()学习资料小结

    昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里.官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options ...

随机推荐

  1. grep和sed替换文件中的字符串

    sed -i s/"str1"/"str2"/g `grep "str1" -rl --include="*.[ch]" ...

  2. linux下分卷tar.bz文件的合并并解压缩

    linux下分卷tar.bz文件的合并并解压缩 例: linux.tar.bz2.001;linux.tar.bz2.002;linux.tar.bz2.003; 首先 cat linux.tar.b ...

  3. Windows Service的安装卸载 和 Service控制(转)

    Windows Service的安装卸载 和 Service控制 原文地址:http://www.cnblogs.com/Peter-Zhang/archive/2011/10/15/2212663. ...

  4. Redis集群创建报错

    Redis集群环境:och163/och164/och165 在执行如下脚本时报错: ./src/redis-trib.rb create 10.1.253.163: 10.1.253.164: 10 ...

  5. Grunt 插件使用汇总

    最近使用了很多 Grunt 插件,这里把使用 Grunt 中涉及的从开发.代码检查.单元测试.E2E 测试,直到发布所涉及的插件,做一个比较完全的汇总. 环境搭建 1. 创建 Web 前端开发环境 2 ...

  6. jmeter随笔(4)--中文url编码问题

    最近在工作中,对jmeter实践的点滴的记录,这里分享交流,不一定正确,仅供参考和讨论,有想法的欢迎留言.谈论,手机上图片如果不清晰,请点击[阅读原文]查看. 技巧1:中文url编码问题 问题:我们抓 ...

  7. ORA-00845: MEMORY_TARGET not supported on this system

    cd $ORACLE_HOME cd dbs cat init.ora cat spfilematedata.ora 查看MEMORY_TARGET设置的大小 修改系统,设置shm的大小大于MEMOR ...

  8. Eclipse中Jsp页面警告的解决方法小结

    恩,只要是开发人员,这样的小事情总会遇到的,对于这其中的某些警告性的错误是不影响代码的运行的,对应的功能也是能实现的,不过总给人一种不太好看的感觉!如果代码写的比较符合规范,这些问题也就自然而然的消失 ...

  9. POJ2001-Shortest Prefixes-Trie树应用

    沉迷WOW又颓了两天orz,暴雪爸爸要在国服出月卡了...这是要我好好学习吗?赶紧来刷题了... OJ:http://poj.org/problem?id=2001 题目大意是求所有字符串里每一个字符 ...

  10. Java创建WebService服务及客户端实现

    简介 WebService是一种服务的提供方式,通过WebService,不同应用间相互间调用变的很方便,网络上有很多常用的WebService服务,如:http://developer.51cto. ...