动态请求数据来更新页面是现在非常常用的方法,现在通过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. zabbix入门到精通之Zabbix对linux主机的监控

    我们大概了解了怎么对台主机进行监控,主要步骤设计到添加主机,并且为主机添加监控项,这里主要为item,然后在item的基础上对item进行绘图并且通过screen的方式把不同的监控图像汇总到一张scr ...

  2. 解决 aspx 页面 TextBox 不支持 type="number"

    安装 framework 4 并且打上补丁 Microsoft .NET Framework 4 可靠性更新 1 (KB2533523) https://www.microsoft.com/zh-cn ...

  3. 可以获取客户端ip的API

    http://www.ip138.com/ip2city.asp http://www.bliao.com/ip.phtml http://www.whereismyip.com/ http://ww ...

  4. Codeforces 633D

    题意: 给定n,和一个长度为n的序列. 让你在这n个数中找长度尽可能长的fib数列. 思路: 这题的数字是在1e9范围内的,所以最长的可能存在的fib数列官方的解释是90左右.有一种情况除外,就是0的 ...

  5. poj 3080 Blue Jeans

    点击打开链接 Blue Jeans Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10243   Accepted: 434 ...

  6. Android--输入自动提示AutoCompleteTextView

    布局文件: <TextView android:id="@+id/title" android:layout_width="wrap_content" a ...

  7. js捕获回车事件,并且获取每一条输入内容

    <body> <div style="width: 200px; height: 20px;"> <textarea id="inputVa ...

  8. OC基础(17)

    ARC基本概念 ARC快速入门 ARC下的内存管理 ARC和MRC兼容和转换 *:first-child { margin-top: 0 !important; } body > *:last- ...

  9. x86_64平台编译链接汇编程序

    assemble: nasm -f elf32 sample.asm -l sample.lst link: ld -m elf_i386 -o test sample.o io.o

  10. cocos2d-x 中 TTF 字体文件的位置

    cocos2d-x 中,字体文件需要保存在 fonts 文件夹中,如果字体路径中没有 fonts/ 会自动添加上这个文件夹. 如果字体名称没有 .ttf 后缀,也会自动加上这个后缀. unsigned ...