jQuery插件jQuery Templates怎么用

本篇文章給大家分享的是有關(guān)jQuery插件jQuery Templates怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

我們知道微軟早已開始全面支持jQuery，并在MVC項(xiàng)目中默認(rèn)添加了jQuery，這對(duì)我們廣大Asp.net開發(fā)者帶來(lái)了福音。目前，微軟已經(jīng)為jQuery開發(fā)了三款jQuery插件，分別為jQuery Glob、jQuery Templates和jQuery Data Linking。由于考慮到國(guó)內(nèi)開發(fā)者有很少使用者，我就不進(jìn)行介紹了，先看下jQuery。 Templates：

jQuery  Templates使開發(fā)者能方便的將javascript對(duì)象綁定到html中，而不需要我們一個(gè)文本框一個(gè)文本框機(jī)械的來(lái)綁定數(shù)據(jù)。jQuery  Templates支持簡(jiǎn)單的語(yǔ)法，使我們能夠得到想要的html結(jié)果，使用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我們應(yīng)將要顯示的內(nèi)容嵌入到<script type="text/html">標(biāo)記中，我們以非常簡(jiǎn)單的一個(gè)例子來(lái)看看jQuery Templates的使用方法：

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

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

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

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

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

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

下邊顯示了使用Template中的if、each方法，也沒(méi)有過(guò)多可說(shuō)的，我們使用者使用一兩次也就記下了它的語(yǔ)法：

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

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

以上就是jQuery插件jQuery Templates怎么用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。