超好用的jQuery樣板引擎 – jBind

Posted in 六月 17th, 2009 by 阿育 | Filed under 程式設計 | Comments (0)

我之前分享過過一篇jQuery樣板的文章 - jQuery的JavaScript 樣板引擎 – royTemplate 裡面有推薦兩個不錯的Javascript樣板，依舊推薦，但我自己寫的那個狗屁不通樣板如果已經使用的人就請勿再使用了，因為使用了這個jBind之後才發現我寫的那個效能奇差無比（差到讓我想噴血），原因是因為我的寫法對效能的影響很大。

今天要介紹的這個jBind樣板引擎的優點剛剛好符合我的需求：

  • 操作簡單（我想沒有人不喜歡簡單吧？）。
  • 要有區塊的功能（這是很常見的需求）。
  • 檔案要小（javascript是在Client端執行的，越小的檔案當然越好）。
  • 執行效能要好。
  • 甚至多了自定義處理的功能。

    • 操作概念一樣是指派JSON變數給樣板，樣板的定義大約如下：

    區塊

    使用HTML註解表示。例如：

    

......區塊內的內容.....

    若不經過特殊指定，每個樣板需至少指定一個<!– data –>為根區塊。

    變數

    使用大括號「{」及「}」涵蓋。

    例如：{name}

    {name}



{role}, {type}

    一個完整的樣板定義如下

    

{name}

    

        {role}, {type}

    一個完整的範例
    HTML：

    

    
	


    
{thead1}
{thead2}

    
    

	


    
{bookName}
{author}

    
    

	


    
{tfoot1}
{tfoot2}

    Javascript：

    var vars =
{
	thead1:'書名',
	thead2:'作者',
	tfoot1:'書名',
	tfoot2:'作者',
	rows:
	[
		{
			bookName:'jQuery in Action',
			author:'Bibeault, Bear'

		},
		{
			bookName:'Learning jQuery',
			author:'Jonathan Chaffer、Karl Swedberg',

		}
	]
};

//指派樣板JSON變數，並把結果加入id為show的tag中
var node = $('#tableTemplate').bindTo(vars,{appendTo:'#show'});

    結果：

    


    
書名
作者

    
    


    
jQuery in Action
Bibeault, Bear

    
    


    
Learning jQuery
Jonathan Chaffer、Karl Swedberg

    
    


    
書名
作者

    更多完整、詳細的範例請直接上jBind官網觀看

    相關連結：

    Tagged : ,

    你可能會感興趣

    留下迴響