它是一个基于jquery的模板展示插件,有了它就可以去展示JSON数据渲染到HTML页中!
一.使用方法
引入Jquery
引入 tmpl
<script src="../Scripts/jquery-1.12.4.min.js"></script>
<script src="../Scripts/jquery.tmpl.min.js"></script>
定义模板块
<script id="template" type="text/x-jquery-tmpl">
//重复项
</script>
二.基本使用示例
<!DOCTYPEhtml>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/jquery-1.11.0.js"></script>
    <scriptsrc="js/jquery.tmpl.js"></script>
</head>
<body>
<tableid="div_demo"border="1">
    <tr>
        <td>编号</td><td>姓名</td><td>年龄</td><td>状态</td>
    </tr>
</table>
<!--定义模板-->
<scriptid="demo"type="text/x-jquery-tmpl">
    <tr>
      <td>${ID}</td>
      <td>{{= Name}}</td>     /*同占位符作用相同,注意空格*/
      <td>${Number(Age)+1}</td>  /*可以是表达式*/
      <td>${Status}</td>
    </tr>
</script>

<scripttype="text/javascript">
    varusers= [{ID:'S1001',Name:'Joseph Chan',Age:'18',Status:1},
        {ID:'S1002',Name:'Mary Cheung',Age:'20'}];
// 引用模板在Table中显示数据
    $("#demo").tmpl(users).appendTo('#div_demo');  
</script>
</body>
<ml>

实现思路
获取数据源 tmpl(JsonDataBase)
通过插件的tmpl方法可以对模板进行绑定数据在追加XX元素上

绑定字段的三种方式
 ${name}
   {{= name}}
   {{html name }}
绑定时的判断
  {{if $data.Status==1 }}
            禁用
         {{else}}
            正常
         {{/if}}

更多方法尽在

Jquery.tmpl的更多相关文章

  1. jquery tmpl 详解

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

  2. artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

    artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

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

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

  4. MVC - 11(下)jquery.tmpl.js +ajax分页

    继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...

  5. jquery tmpl遍历

    最近发现大家用模板渲染一些顺带逻辑功能代码块时,用jquery tmpl较多,遇到了一些问题,现在就个人以前研究过的一切常用功能作介绍,主要针对遍历,其它的大家可以自行浏览一起网站,如:http:// ...

  6. jQuery tmpl用法总结

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

  7. JQuery.tmpl()的用法

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

  8. jQuery .tmpl() 用法

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

  9. 让jquery.tmpl.js支持index序号

    在写Web程序时,想简单处理会使用JS模板,常用的是Jquery的jquery.tmpl.js插件.整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法. 本次文章想分享的一点是其中的一 ...

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

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

随机推荐

  1. PhpStorm代码提示(省电模式)的设置与使用

    PhpStorm中有个,Power Save Mode(省电模式),开启则代码不能自动提示,关闭则可以. 开启/关闭: 1.点击“File”菜单,最下面,Power Save Mode,勾选或取消: ...

  2. laravel使用redis队列实践(只需6步,超详细,超简单)

    1.配置使用redis队列 在.env文件找到QUEUE_DRIVER=sync改成QUEUE_DRIVER=redis redis配置一般不用改如果有密码改.env文件的REDIS_PASSWORD ...

  3. 在本机eclipse中创建maven项目,查看linux中hadoop下的文件、在本机搭建hadoop环境

    注意 第一次建立maven项目时需要在联网情况下,因为他会自动下载一些东西,不然突然终止 需要手动删除断网前建立的文件 在eclipse里新建maven项目步骤 直接新建maven项目出了错      ...

  4. 浅谈Java语言中try{}catch{}和finally{}的执行顺序问题

    浅谈Java语言中try{}catch{}和finally{}的执行顺序问题 2019-04-06  PM  13:41:46  1. 不管有没有出现异常,finally块中代码都会执行: 2. 当t ...

  5. 20175305张天钰Java结对编程四则运算(二)

    Java结对编程四则运算(二) 一.题目描述及要求 Git提交粒度不要太粗,建议一个文件/一个类/一个函数/一个功能/一个bug修复都进行提交,不能一天提交一次,更不能一周一次,参考Commit Me ...

  6. 一种DTO的规划方案

    现在以网页发布的软件非常普遍,叫BS模式.前后端分离也是大趋势,或者说逐渐普及开来,深受前后端程序员的喜爱,我还是习惯以程序员来泛称所有软件制作者.后端需要把数据传送给前端,往往是通过DTO的序列化来 ...

  7. 【省选十连测之九】【DP】【组合计数去重】【欧拉函数】基本题

    目录 题意: 输入格式: 输出格式: 数据范围: 思路: 嵌套题的转移 基本题的转移 Part1 Part2 Part3 代码 题意: 这是一个关于括号组合的题. 首先定义一道题是由'(',')',' ...

  8. CentOS7虚拟机安装VMware Tools

    1.在VMware中点击安装VMware Tools 2.挂载光驱 mount /dev/cdrom /mnt 3.拷贝解压,注意是大小写敏感的,如果不知道文件名可以用ls查看. [root@loca ...

  9. BZOJ2567 : 篱笆

    设第$i$个区间的左端点为$a[i]$,区间长度为$len$,要覆盖的部分的长度为$all$,因为区间左端点递增,所以最优方案中它们的位置仍然递增. 对于链的情况,要满足三个条件: 1. 区间$i$可 ...

  10. leetcode-求众数

    题目:求众数 给定一个大小为 n 的数组,找到其中的众数.众数是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假设数组是非空的,并且给定的数组总是存在众数. 示例 1: 输入: [3,2,3 ...