jquery-tmpl 插件
生活随笔
收集整理的這篇文章主要介紹了
jquery-tmpl 插件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
做項(xiàng)目時頁面上有處功能是：在頁面有處列表、有添加，我添加修改或刪除后要刷新這個列表，首先想到的是局部刷新，但我們一般說的局部刷新就是利于ajax去后臺調(diào)用數(shù)據(jù)并顯示，而這里是一整個列表就比較麻煩了，刷新重新加載列表時不止要加載列表，還需把table的標(biāo)簽這些都得重新加載下，寫在js里或后臺都得寫?"<table class=\"datalist\">" 這之類的，太麻煩了 而后期要修改也不好改，于是乎就找到了jquery的tmpl插件，這個貌似還是官方在好幾年已經(jīng)不維護(hù)并停留在了beta版，不過還是有它的好用之處，下面源碼實(shí)例說明：（有好幾種用法，下面只說明本人用的感覺比較簡單的一種）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> <script type="text/javascript">$(function () {var temp = [{ Name: "blue", explain: "藍(lán)色" },{ Name: "red", explain: "紅色" },{ Name: "yellow", explain: "黃色" }];$("#tempTemplate").tmpl(temp).appendTo("#tempList");}) </script> </head><body><ul id="tempList"></ul><script id="tempTemplate" type="text/x-jquery-tmpl"><li><b>${Name}</b> (${explain})</li></script> </body> </html>View Code
其實(shí)原理很簡單，就好比把寫好的標(biāo)簽當(dāng)作模版，用模版出現(xiàn)的關(guān)鍵字去循環(huán)出里面的數(shù)據(jù)再顯示出來。
我要刷新數(shù)據(jù)的話就用ajax從后臺讀取下數(shù)據(jù)并json格式傳回即可。
插件官方下載地址：https://github.com/BorisMoore/jquery-tmpl
轉(zhuǎn)載于:https://www.cnblogs.com/dangzhensheng/p/3897569.html
總結(jié)
以上是生活随笔為你收集整理的jquery-tmpl 插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《相和歌辞·王昭君二首》第三句是什么
- 下一篇： map 小模板~~~ 写的不好 继