Jquery.tmpl
生活随笔
收集整理的這篇文章主要介紹了
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}}
更多方法盡在
轉載于:https://www.cnblogs.com/ZaraNet/p/9433853.html
總結
以上是生活随笔為你收集整理的Jquery.tmpl的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： N-Gram的基本原理
- 下一篇： UDP接收端和发送端_Socket编程