當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[原]jQuery .tmpl(), .template()学习

發布時間：2024/3/24 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 [原]jQuery .tmpl(), .template()学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

昨晚無意中發現一個有趣的jQuery插件.tmpl()，其文檔在這里。

官方解釋對該插件的說明：將匹配的第一個元素作為模板，render指定的數據，簽名如下:

.tmpl([data,][options])

其中參數data的用途很明顯：用于render的數據，可以是任意js類型，包括數組和對象。options一般情況下都是選項了，官方指出，此處的options是一個用戶自定義的鍵值對的map，繼承自tmplItem數據結構，適用于模板render動作期間。

在這里可以下載到最新的tmpl插件，值的一提的是，官方同時也說明了，tmpl目前是beta版，使用需謹慎..

好吧，先來一個最直觀的例子：

<%@ Page Language="C#" AutoEventWireup="true" %><!DOCTYPE html> <html> <head><title>jquery template demo</title><link rel="stylesheet" href="content/site.css" type="text/css" /><link rel="stylesheet" href="content/jquery.ui.css" type="text/css" /><script type="text/javascript" src="scripts/jquery.js"></script><script type="text/javascript" src="scripts/jquery.ui.js"></script><script type="text/javascript" src="scripts/jquery.tmpl.js"></script><script id="myTemplate" type="text/x-jquery-tmpl"><tr><td>${ID}</td><td>${Name}</td></tr></script><script type="text/javascript">$(function () {var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}];$('#myTemplate').tmpl(users).appendTo('#rows');});</script><style type="text/css">body{padding: 10px;}table{border-collapse: collapse;}</style> </head> <body><table cellspacing="0" cellpadding="3" border="1"><tbody id="rows"></tbody></table> </body> </html>

例子雖然很小也很簡單，但我覺得這個已經很有用了。

當然，.tmpl()還可以使用來自遠端的數據，比如說服務:

public ActionResult SampleData(){var json = new JsonResult();json.Data = new[] { new { ID = "remote1", Name = "abcd" }, new { ID = "remote2", Name = "efg" } };json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;return json;}

這是一個MVC的Action，我把它當做是一個提供數據的服務，然后js代碼如下:

$('#btnAjax').click(function () {$.getJSON('@Url.Action("SampleData", "Home")', function (json) {$('#rows').empty();$('#myTemplate').tmpl(json).appendTo('#rows');});});

效果:

定義模板時，推薦的方式為定義使用

做為模板的包裝器，但定義方式并不只有這一種，你可以使用

的方式來定義，但是官方文檔中說，這種方法可能會產生瀏覽器無法解析的HTML，因此不推薦使用，不過我試了下，倒沒有出什么意外：

HTML:

Javascript:

var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}];$('#inline').tmpl(users).appendTo('#container');

效果:

編譯緩存模板，在jQuery .tmpl()中，還可以將模板事先編譯并緩存起來，然后在合適的時侯再使用，這對于一些數據嵌套是很有用的，如:

Html

Javascript

效果:

$.template()方法，將一段Html編譯為模板，示例:

Javascript

var markup = '<tr><td>${ID}</td><td>${Name}</td></tr>';$.template('template', markup);$.tmpl('template', users).appendTo('#templateRows');

這樣就可以將markup中定義的模板應用于templateRows對象。

jQuery .tmpl()的標簽，表達式，屬性：

${}:從前面的例子來看，這個標簽的作用很明顯了，相當于是占位符，但是它還有另一種寫法{{= field}}如:

必須要注意的是，"="號后必須跟一個空格，不然是沒有效果的。

另外，${}中還可以放表達式，這個牛x吧，如:

Html

Javascript

效果：

jQuery .tmpl()有兩個比較有用的屬性:$item、$data:

$item代表當前的模板；$data代表當前的數據。

Html

Javascript

效果:

{{each}}這個標簽一看就知道是做循環用的了，用法如下：

Html

Javascript

效果:

{{each}}還有另一種寫法:

Javascript

作用和前一種是一樣的。

{{if}}和{{else}}，這兩個標簽應該一看就知道作用了，直接上示例:

Javascript

如果Langs數組元素超過1個，則用'; '連接起來，否則就直接顯示Langs，效果:

{{html}}，直接將對象屬性值作為HTML代碼替換占位符：

Javascript

效果:

{{tmpl}}，前面已經提過該標簽了，這里再給一個使用參數的例子:

Javascript

效果:

{{wrap}},包裝器，這回不需要指定對哪一個元素使用模板了，直接生成模板的包裝器，示例:

Html

Javascript

效果:

$.tmplItem()方法，使用這個方法，可以獲取從render出來的元素上重新獲取$item，示例:

$('tbody').delegate('tr', 'click', function () {var item = $.tmplItem(this);alert(item.data.Name);});

效果:

至此，官方的API中介紹的內容就完了，我的E文水平不高，對于某些細節難免理解不周，如有謬誤之處，敬請指正，謝謝。

源代碼下載

轉載于:https://www.cnblogs.com/think8848/archive/2011/07/17/2108570.html

總結

以上是生活随笔為你收集整理的[原]jQuery .tmpl(), .template()学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：可编程控制器类毕业论文文献有哪些？
下一篇： s7300plc串口通信_实现S7-30