中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

jTemplates

jTemplates是一個(gè)功能豐富的模板引擎，它作為一個(gè)jQuery插件來執(zhí)行。jTemplates支持很多先進(jìn)的功能，包括：

• 外部模板－－您可以通過提供的URL從外部文件加載模板，外部文件可以包含多個(gè)模板；
• 外部數(shù)據(jù)－－您可以從外部URL加載數(shù)據(jù)；
• 實(shí)時(shí)刷新－－你可以自動(dòng)定期的更新模板內(nèi)容；
• HTML編碼－－你可以阻止諸如<和>的編碼字符對(duì)JavaScript插入的攻擊；
• Includes－－您可以在一個(gè)模板中包含另一個(gè)模板；
• 調(diào)試模式－－您可以在出錯(cuò)的地方終止模板引擎，并顯示錯(cuò)誤信息。

下面示例中的代碼演示了如何使用jTemplates顯示產(chǎn)品清單。

<script src="../jquery-1.4.1.js" type="text/javascript"></script>
<script src="jquery-jtemplates_uncompressed.js" type="text/javascript"></script>
<script type="text/javascript">
    var data = {
        products: [
            { name: "Laptop", price: 788.67 },
            { name: "Comb", price: 2.50 },
            { name: "Pencil", price: 1.99 }
        ]};

    $(showProducts);
    function showProducts() {
        // attach the template
        $("#results").setTemplateElement("template");
   
        // process the template
        $("#results").processTemplate(data);
    }
    function formatPrice(price) {
        return "$" + price;
    }
</script>

setTemplateElement()方法給HTML元素指定一個(gè)模板，processTemplate()方法使用所提供的數(shù)據(jù)處理模板。

上面的代碼中，加載的模板為名為textarea的元素，下面就是模板在頁面主體中呈現(xiàn)的外觀。

<textarea id="template" style="display:none">
    {#foreach $T.products as product}
    <div>
        Product Name: {$T.product.name}
        <br />
        Product Price: {formatPrice($T.product.price)}
    </div>
    {#/for}
</textarea>

注意，一個(gè)jTemplate模板可以包含諸如#foreach、#for、and #if的特殊命令。至于調(diào)用formatPrice()函數(shù)，它表明模板也可以包含任意JavaScript函數(shù)的調(diào)用。

默認(rèn)情況下，為了防止JavaScript的插入攻擊，在傳遞給模板的數(shù)據(jù)中，jTemplate 的HTML編碼了包含的特殊字符。例如，如果一個(gè)產(chǎn)品的名稱為<b>Laptop<b>，那么，名稱將被轉(zhuǎn)換成&lt;b&gt;Laptop&lt;/b&gt; 。

jTemplates使您可以同時(shí)從外部URL加載模板和數(shù)據(jù)。例如，下面的代碼將從一個(gè)名為MyTemplates.htm的文件中加在模板，從一個(gè)名為MyData.htm文件中加在一系列數(shù)據(jù)。

function showProducts() {
    $.jTemplatesDebugMode(true);
    // attach the template
    $("#results").setTemplateURL("MyTemplate.htm");
    // process the template
    $("#results").processTemplateURL("MyData.htm");
}

MyTemplate.htm文件如下所示：

{#foreach $T.products as product}
    Product Name: {$T.product.name}
    Product Price: {formatPrice($T.product.price)} 
{#/for}

jTemplates允許您可以在一個(gè)單一文件定義多個(gè)模板，雖然在MyTemplate.htm文件沒有演示此功能。

最后，MyData.htm文件如下所示：

{"products": [
  { "name": "Laptop", "price": "788.67" },
  { "name": "Comb", "price": 2.50 },
  { "name": "Pencil", "price": 1.99 }
] }

當(dāng)然，包含在MyData.htm的內(nèi)容有數(shù)據(jù)庫動(dòng)態(tài)生成。

出處：
責(zé)任編輯：moby

上一頁 jQuery模板提案 [2] 下一頁 jQuery模板提案 [4]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。