动态请求数据来更新页面是现在非常常用的方法,现在通过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. [ActionScript 3.0] AS3 绘制正二十面体(线条)

    分析: 正二十面体共有12个顶点.30条棱,其20个面都是正三角形.每条棱所对应的弧度值为1.1071487177940904弧度,这个弧度值可通过求Math.sqrt(5)/5的反余弦值求得.正二十 ...

  2. SPCOMM 接收数据不完整!该如何解决

    SPCOMM 接收数据不完整!该如何解决   SPCOMM 接收数据不完整!我作了一个 读取地磅数据的程序,是用spcomm接收的! 总共有五台地磅,其他4台地磅数据读取都正常.但是有一台接收数据的时 ...

  3. 关于如何查看mysql版本及其端口号

    关于如何查看MySQL版本: 方法一: 进入mysql cmd, status; 1 status; 将显示当前mysql的version的各种信息. 方法二: 还是在mysql的cmd下,输入: s ...

  4. OpenGL ES 着色语言

    OpenGL 着色器中使用的是着色语言GLSL.着色语言源自C语言,提供了丰富的原生类型,如向量.矩阵等,还有大量的内建函数,这在处理3D图形时可以更加高效.易用.下面是整理的是OpenGL ES2. ...

  5. (medium)LeetCode 240.Search a 2D Matrix II

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  6. jdbc调用sparksql

    将hive-site.xml拷贝到spark目录下conf文件夹 local模式 spark-sql --driver-class-path /usr/local/hive-1.2.1/lib/mys ...

  7. mac下配置eclipse的hadoop环境

    下载eclipse-jee-mars-1-macosx-cocoa-x86_64.tar 右键显示包内容,将hadoop-eclipse-plugin-2.6.0.jar拷入到刚显示的包的plugin ...

  8. &amp; replace &

    var decoded = encoded.replace(/&/g,'&'); http://stackoverflow.com/questions/3700326/decode-a ...

  9. A手机等的网络udp广播,收到广播以后回复udp消息

    B手机:向A手机发送一条消息,等待A回复 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: ...

  10. 《点石成金-访客至上的web和移动可用性设计秘籍》读书笔记

      简介 作者Steve Krug,惯例先去了解一下本书的作者,发现书中介绍的并不多,百度一下后发现这本书比作者出名.好吧,百度就是这样子,作者自称web可用性咨询师,手上这本书是第三版再版,第一版2 ...