微軟jQuery Templates插件的使用

作者：朋友的你 2013-12-02 15:31:37

前不久，本站發(fā)表了一篇jQuery插件-微軟 jQuery Templates，里邊簡單的介紹了一下jQuery Templates的用法，今天就讓我們再次詳細(xì)的看看它的用法。其中，部分寫法同我先前看到的不一樣，讓我們一起看看吧！

考慮到很多新學(xué)者，加上國內(nèi)這方面資料也不多，我們還是一步一步來看看jQuery Templates的使用方法。比如我們有下邊的數(shù)據(jù)集：

var users = [ 
    { name: "Google", website: "google.com" }, 
    { name: "jQuery學(xué)習(xí)", website: "jquery001.com" } 
];

我們的目的是以無序列表(ul)的形式將網(wǎng)站名稱和對應(yīng)的網(wǎng)址顯示出來，在以前我們經(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，個人感覺可讀性變得更好一些，如下：

<script id="userTemplate" type="text/html"> 
<li><a href="http://${website}">${name}</a></li> 
</script>

接下來，調(diào)用jQuery Templates中的方法如下：

$("#userTemplate").render(users).appendTo("ul");

這樣我們就已經(jīng)實(shí)現(xiàn)了我們的目標(biāo)，在我看到的資料中，作者使用的方法是tmpl()方法而不是render()方法來組織數(shù)據(jù)的，也許是我使用的jQuery Templates版本不是***的。我使用時智能提示如下：

jQuery Templates render()方法

還沒有使用過jQuery Templates嗎？趕快試試吧！據(jù)說在jQuery 1.5版本中將會把微軟開發(fā)的三個jQuery插件中添加進(jìn)去，讓我們期待吧！

至于如何使用if、each簡單語法，你可以看看前一篇文章，這樣就可以根據(jù)我們的需要來展示數(shù)據(jù)了。下邊是完整的頁面代碼，希望能幫助到你！

<!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

責(zé)任編輯：陳四芳來源： jquery001.com

jQuery 插件