DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> jQuery模板:jQuery Templates Proposal
jQuery模板:jQuery Templates Proposal
編輯:AJAX詳解     

導言(Introduction)

這個提案描述了如何在jQuery的核心庫中增加模板支持。更為特別是,這個提案描述了一個新的jQuery方法--名叫render(),該方法可以使你用一段Html代碼渲染一個Javascript 對象和Javascript數組作為一個模板。

該提案的目的在於使插件開發者可以利用標准的方法聲明和渲染模板。有一個標准的方法聲明和渲染模板對每一個人都很有裨益:

  • 插件開發者可以構建豐富的、數據驅動的插件,如DataGrid插件。插件開發者可以在jQuery的核心庫對模板支持的基礎上構建插件,這樣每一次開發新的插件時,可以避免重新實施渲染模板代碼。
  • 插件用戶可以利用一個標准的語法聲明模板。插件用戶每次創建模板時不需學習一種新的方法,每次都是從使用新的插件開始。

該提案分兩個主要部分。第一部分包含現有模板解決方案簡要調查,第二部分是我們的建議,聲明和渲染一個模板的方法如何添加到jQuery的核心庫中。

現有的模板解決方案

現在已經有了許多JavaScript的解決方案模板,從這方面說,標准化的模板解決方案必然是大勢所趨。在本節中,我們向你簡要描述四個最流行最有趣的模板。現有的模板解決方案能解決什麼?那些特色在jQuery核心中有意義。

微模板

John Resig的微型模板引擎非常小(未壓縮僅2KB)。然而,這點小小的代碼已經抓到了渲染一個模板的核心功能。

下面是一個用微模板引擎顯示單個JavaScript產品對象的例子。

<script src="../jquery-1.4.1.JS" type="text/Javascript">>;/script>;
<script src="MicroTemplating.JS" type="text/Javascript">;</script>;
<script type="text/Javascript">;
    var product = { name: "Laptop", price: 788.67 };
    $(showProduct);
    function showProduct() {
        $("#results").Html( tmpl("productTemplate", product) );
    }
    function formatPrice(price) {
        return "$" + price;
    }
</script>;

tmpl()方法用來從一個product模板和product對象生成一個字符串。其結果分配給一個名叫results的div元素的innerHtml。

product模板在頁面body的SCRIPT中定義。

<script type="text/Html" id="productTemplate">
    Product Name: <%= name %>
    <br />
    Product Price: <%= formatPrice(price) %>
</script>
<div id="results"></div>

注意,SCRIPT的type屬性為“text/ Html”。用這種方式來聲明web浏覽器會忽略SCRIPT裡的內容,將其內容當作字符串來對待。

注意,模板包含代表產品名稱和價格屬性的表達式。調用Javascript的formatPrice()方法來格式化產品的價格。在模板裡你可以調用任何JavaScript函數。

這裡是如何渲染一個product對象數組的示例:

function showProducts() {
    // parse the template
    var template = tmpl("productTemplate");
    // loop through the products
    var results = '';
    for (var i = 0; i < products.length; i++) {
        results += template(products[i]);
    }
    // show the results
    $("#results").Html(results);
}

tmpl()函數支持currying(關於什麼currying,可以在網上查閱資料)。如果沒有提供數據給tmpl()函數,他將返回一個Javascript函數,代表解析的模板。

在上面的代碼中,模板被解析,然後為每一個product調用模板方法生成一個字符串。最後,字符串分配給名叫results的div元素的innerHtml。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved