我們知道微軟早已開始全面支持jQuery，并在MVC項目中默認添加了jQuery，這對我們廣大Asp.net開發(fā)者帶來了福音。目前，微軟已經(jīng)為jQuery開發(fā)了三款jQuery插件，分別為jQuery Glob、jQuery Templates和jQuery Data Linking。由于考慮到國內開發(fā)者很少使用***者，我就不進行介紹了，有興趣的可以Google一下。本篇先看下jQuery Templates：

jQuery Templates使開發(fā)者能方便的將javascript對象綁定到html中，而不需要我們一個文本框一個文本框機械的來綁定數(shù)據(jù)。jQuery Templates支持簡單的語法，使我們能夠得到想要的html結果，使用jQuery Templates方法如下：

首先，我們需要引用jQuery文件和jQuery.tmpl文件，如下：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="jquery.tmpl.js" type="text/javascript"></script> 

使用jQuery Templates我們應將要顯示的內容嵌入到<script type="text/html">標記中，我們以非常簡單的一個例子來看看jQuery Templates的使用方法：

<div id="userinfo"></div> 
<script id="usertemplate" type="text/html"> 
<div class="userinfo"> 
    UserName:{{= name}} 
    Website:{{= website}} 
</div> 
</script> 

我們使用Template可以顯示javascript對象或者javascript對象數(shù)組，下邊是我們將要用來顯示的javascript對象數(shù)組和jQuery方法：

var users = [ 
    { name: "朋友的你", website: "http://www.jquery001.com" }, 
    { name: "jQuery學習", website: "http://www.jquery001.com" } 
]; 
$(document).ready(function () { 
    $("#usertemplate") 
    .render(users) 
    .appendTo("#userinfo"); 
}); 

render()方法將數(shù)據(jù)轉換為串，***將數(shù)據(jù)追加到userinfo元素，頁面加載后執(zhí)行結果如下圖所示：

前邊說過，jQuery Templates中可以使用簡單的語法，這樣我們可以根據(jù)需要來顯示數(shù)據(jù)。比如在本例中，比如某人有多個網(wǎng)站，下邊我們看看簡單的if和each方法。javascript對象數(shù)組如下：

var users = [ 
    { name: "朋友的你", websites: ["jquery001.com", "google.com"] }, 
    { name: "jQuery學習", websites: ["jquery001.com"] }, 
    { name: "jQuery", websites: [] } 
]; 

下邊顯示了使用Template中的if、each方法，也沒有過多可說的，我們使用者使用一兩次也就記下了它的語法：

<div id="userinfo"></div> 
<script id="usertemplate" type="text/html"> 
<div class="userinfo"> 
    UserName:{{= name}} 
    {{if websites.length}} 
    Websites: 
    <ul> 
        {{each(i,website) websites}} 
        <li>{{= website}}</li> 
        {{/each}} 
    </ul> 
    {{/if}} 
</div> 
</script> 

下圖顯示了***的結果，可能您已經(jīng)預料到了。當然了本篇只是非常簡單的介紹了下jQuery Templates的基本使用方法，希望對讀者有所幫助。

原文鏈接：http://www.jquery001.com/jquery-templates.html