XTemplate是一個javascript組件，主要是用于完成html頁面上數據的綁定。常用的方式是用ajax從遠程讀取數據，XTemplate會將這些數據按規則綁定到頁面的dom上去。它支持兩種絆綁定方式，綁定數組和綁定對象。簡單的說一個用于顯示列表，另一個用于顯示一般內容。

單變量綁定

是以html中data-bind標記為綁定對象，只要data-bind的內容和綁定的變量同名，即會自動賦值。

例如：

<p data-bind='title'></p>

這時如果有一個變量為如下結構{title:'hello world'}，那么，這個name為title的p標簽就會顯示hello world。

最終會生成

<p data-bind='title'>hello world</p>

使用方法參見示例：

1.普通綁定：輸出到p的默認內容中，此處為innerHTML屬性。一般img將輸出到src，input輸出到value，其它輸出到innerHTML。

<p data-bind="content"></p>

2.原始值按html輸出：

<p data-bind="content" data-bind-to="innerHTML"></p> 或 <p data-bind="content" data-bind-to="innerHTML">{!content}</p> 第1種為簡寫，第2種為data-bind-to的標準寫法

3.data-bind-to使用：

<b data-bind="market_product_id" data-bind-to="title" title="{!content}">title</b> data-bind-to指定了輸出的屬性，所以將綁定的內容將按data-bind-to進行綁定。此處data-bind-to為title，
待綁定的屬性內容要使用模板。
所以XTemplate將會把market_product_id的值綁定到title屬性上。
此處模板內content前有個嘆號“！”，代表輸出原始值，不進行html轉義。

4.模板輸出：必須使用data-bind-to指定屬性名，默認的輸出屬性值不會當作模板。

<p data-bind="content" data-bind-to="innerHTML"><b>{content|default,'沒有內容顯示'}</b></p> content的內容會以內部html為模板綁定后顯示

如果content為空，最終輸出 <p data-bind="content" data-bind-to="innerHTML"><b>沒有內容顯示</b></p> 如果剛開始不想顯示出模板的內容，可以將p設置為隱藏 <p style="display:none" data-bind-to="innerHTML" data-bind="content"><b>{content|default,'沒有內容顯示'}</b></p> 或 <p class="hide" data-bind-to="innerHTML" data-bind="content"><b>{content|default,'沒有內容顯示'}</b></p> 綁定后style.display將被重置為空，css中的hide也會被移除。

5.img的src綁定：

<img data-bind="thumb"/> 最終輸出<img data-bind="thumb" src="圖片地址"/> 指定img的默認顯示圖片，直接使用原來的src指定默認圖 <img data-bind="imgsrc" data-bind-src='/{imgsrc}/abc.jpg' src='默認圖'/> 如果img的地址比較復雜，是組合而成，或是需要用函數，可以使用data-bind-src來指定src的模板。 <img data-bind="thumb" data-bind-src="{thumb1|default,'logo.jpg'}"/> 注意不要用src屬性！！！

不使用data-bind-to指定src，是因為如果指定img的src，將會使瀏覽器多產生一個無效的http請求，影響加載效果。

錯誤的例子：<img data-bind="thumb" data-bind-to="src" src='/{imgsrc}/abc.jpg'> /{imgsrc}/abc.jpg這個地址是不存在的地方，所以會引起一個錯誤的http請求。

數組綁定

數組綁定是指定一個模板，并把數組的內容循環，按模板格式化后返回多行html。

例如：

 <ul data-repeat-name='listdata'> <li>{title}</li> </ul>

這里定義了一個名為listdata的模板，ul的內部html將成為可循環的模板，即

 <li>{title}</li>

為待循環的內容

我們綁定以下變量[{title:'hello 0'},{title:'hello 1'}]

最終會生成

<ul data-repeat-name='listdata'> <li>hello 0</li> <li>hello 1</li> </ul>

使用方法參見示例：

1.普通輸出：

 <ul data-repeat-name='data'> <li>{market_product_id}:{product_name}</li> </ul>

2.img的src綁定：

 <ul data-repeat-name='data'> <li><img data-bind-src='{thumb}'/>{market_product_id}:{!content}</li> </ul> 這里與單變量綁定不同的是沒有使用data-bind指定綁定的屬性，其它使用方法完全一致。

模板的使用

模板的基本語法是{模板內容}，兩端以大括號包圍，中間為模板的內容。

如：{username}，即輸出變量username的內容。

模板可以在循環的模板中使用，也可以在待綁定屬性中使用，也可以在data-bind-src中使用。

使用方法參見示例：

1.使用內部函數處理輸出結果：

{market_product_num|repeat,'*'}//最終輸出market_product_num個*，repeat為內部函數 語法為：[屬性名]|[函數]|[函數] 屬性名后豎線"|"連接函數名，當前的屬性必須為函數的第1個參數。 多個函數時依次用豎線連接，前一個函數作為后一個函數的第一個變量輸入。 如：{user_money|format_money}，其中user_money為綁定屬性名，format_money為內部函數名，主要作用為格式化貨幣。 如果函數有多個參數，使用逗號連接。

2.使用外部函數處理輸出結果：

{market_product_id|#hello,':)'} 函數名前加了#號，代表使用外部函數，此處使用了hello，該函數使用前一定要定義。 此處market_product_id的值會傳給s變量，即第1個變量。 示例1： function hello(s){ return s+' hello'; } 示例2： function hello(s,v){ return s+'hello'+v; }

3.使用多個函數處理輸出結果：

{market_product_id|repeat,'@@'|#hello,':)'} 用|連接即可。

4.使用外部變量：

{id}={#out_abc} 變量前加#

5.進行簡單的運算：

{market_product_id * 3 + 12} 在模板中，屬性名支持簡單的加減乘除運算，復雜的請使用自定義函數處理。

6.在模板中處理子循環：

{list|range,'ID:(id)  '} 使用內部函數range，參數為模板內容。但為了區分子模板和主模板，子模板使用小括號“()”代替大括號。

特殊語法：

!號的使用

在模板中使用，例如{!title}，輸出title的值，以沒有!的區別，這里不會把html進行編碼，會輸出原始的html。

#號的使用

在函數名中使用，如果在函數名前加#，則指定這個函數為全局函數，這時這個函數必須是已經定義好的全局函數或是javascript的內部函數。 在變量名中使用，如果果變量名前加#，則指定這個變量為全局變量，這時這個變量必須是已經定義好的全局變量。

官方網站：http://www.baiduhome.net/lib/view/home/1451808197776