Jquery.tmpl
Posted iwaityou
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery.tmpl相关的知识,希望对你有一定的参考价值。
它是一个基于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
<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的主要内容,如果未能解决你的问题,请参考以下文章