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

Tmpl提供了几种tag:

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

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

先设置好模板:

    <script id="movieTemplate" type="text/x-jquery-tmpl">
<li>
<b>${Name}</b> (${ReleaseYear})
</li>
</script>

再看数据源:

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

最后Script 代码:

<script src="/js/jquery.tmpl.min.js"></script>

     $( "#movieTemplate" ).tmpl( movies )  //获得替换占位符后的值
.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. 【转】group by多个字段理解

    来源:http://uule.iteye.com/blog/1569262 首先group by 的简单说明: group by 一般和聚合函数一起使用才有意义,比如 count sum avg等,使 ...

  2. c# as

    as:用于检查在兼容的引用类型之间执行某些类型的转换. Employee myEmployee = myObject as Employee; if (myEmployee != null) { } ...

  3. android 定时执行一个任务

    1. timer = new Timer(true) TimerTask task =  new TimerTask(){ public void run(){ test(); } } timer.s ...

  4. [ActionScript 3.0] AS3 绘制12面体

    package { import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; im ...

  5. Cordova是做什么的

    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova还提供了一组统一的JavaScript类库,以及为这 ...

  6. 多线程为何用while判断条件,而不用if。

    一.代码: package zz.produceandconsumer; import java.util.LinkedList; public class Storage { private fin ...

  7. Goldengate trial队列维护

    查看进程信息: Info replicat_name $Info replicat_name showch 注:   可以查看到详细的关于checkpoint的信息,用于查看GoldenGate进程处 ...

  8. Sqoop2环境搭建

    正在准备做Spark SQL external data source与关系型数据库交互的部分,参考下Sqoop2是如何操作关系型数据库的. 下载地址:http://archive.cloudera. ...

  9. 如何在CODESOFT中自定义删除文档备料

    CODESOFT 2015是先进的标签设计与集成软件.在使用CODESOFT制作条码标签时,为方便省时,我们可以事先创建自己的文档模板,保存它们以供将来使用.接下来,小编就讲讲CODESOFT 201 ...

  10. A+B问题通解_Pascal_C++_Java

    世界不断发展,各种电子设备不断变得更加迷你,代码却越写越长…… A+B Problem Input:Two integer A,B Output:The ans of A+B 1971年,Niklau ...