微軟jQuery Templates插件的使用
前不久，本站發(fā)表了一篇jQuery插件-微軟 jQuery Templates，里邊簡(jiǎn)單的介紹了一下jQuery Templates的用法，今天就讓我們?cè)俅卧敿?xì)的看看它的用法。其中，部分寫法同我先前看到的不一樣，讓我們一起看看吧！
考慮到很多新學(xué)者，加上國(guó)內(nèi)這方面資料也不多，我們還是一步一步來(lái)看看jQuery Templates的使用方法。比如我們有下邊的數(shù)據(jù)集：
- var users = [
- { name: "Google", website: "google.com" },
- { name: "jQuery學(xué)習(xí)", website: "jquery001.com" }
- ];
我們的目的是以無(wú)序列表(ul)的形式將網(wǎng)站名稱和對(duì)應(yīng)的網(wǎng)址顯示出來(lái)，在以前我們經(jīng)常使用的方法如下：
- var result = "";
- for (var i = 0; i < users.length; i++) {
- result += "<li><a href='http://" + users[i].website + "'>" + users[i].name + "</a></li>";
- }
- $(result).appendTo("ul");
下邊這種寫法使用了jQuery Tempates，個(gè)人感覺可讀性變得更好一些，如下：
- <script id="userTemplate" type="text/html">
- <li><a href="http://${website}">${name}</a></li>
- </script>
接下來(lái)，調(diào)用jQuery Templates中的方法如下：
- $("#userTemplate").render(users).appendTo("ul");
這樣我們就已經(jīng)實(shí)現(xiàn)了我們的目標(biāo)，在我看到的資料中，作者使用的方法是tmpl()方法而不是render()方法來(lái)組織數(shù)據(jù)的，也許是我使用的jQuery Templates版本不是***的。我使用時(shí)智能提示如下：
還沒有使用過(guò)jQuery Templates嗎？趕快試試吧！據(jù)說(shuō)在jQuery 1.5版本中將會(huì)把微軟開發(fā)的三個(gè)jQuery插件中添加進(jìn)去，讓我們期待吧！
至于如何使用if、each簡(jiǎn)單語(yǔ)法，你可以看看前一篇文章，這樣就可以根據(jù)我們的需要來(lái)展示數(shù)據(jù)了。下邊是完整的頁(yè)面代碼，希望能幫助到你！
- <!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>
- <title>jQuery Templates的使用方法-jQuery學(xué)習(xí)</title>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <script src="http://www.jquery001.com/js/jquery.tmpl.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- var users = [
- { name: "Google", website: "google.com" },
- { name: "jQuery學(xué)習(xí)", website: "jquery001.com" }
- ];
- $("#userTemplate").render(users).appendTo("ul");
- });
- </script>
- </head>
- <body>
- <div>
- <script id="userTemplate" type="text/html">
- <li><a href="http://${website}">${name}</a></li>
- </script>
- <ul></ul>
- </div>
- </body>
- </html>
原文鏈接：http://www.jquery001.com/let-us-use-jquery-templates.html
