XTemplate網(wǎng)頁數(shù)據(jù)綁定組件

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

單變量綁定

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

例如：

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

這時如果有一個變量為如下結(jié)構(gòu){title:'hello world'}，那么，這個name為title的p標(biāo)簽就會顯示hello world。

最終會生成

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

使用方法參見示例：

1.普通綁定：輸出到p的默認(rèn)內(nèi)容中，此處為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的標(biāo)準(zhǔn)寫法

3.data-bind-to使用：

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

4.模板輸出：必須使用data-bind-to指定屬性名，默認(rèn)的輸出屬性值不會當(dāng)作模板。

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

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

5.img的src綁定：

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

不使用data-bind-to指定src，是因?yàn)槿绻付╥mg的src，將會使瀏覽器多產(chǎn)生一個無效的http請求，影響加載效果。

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

數(shù)組綁定

數(shù)組綁定是指定一個模板，并把數(shù)組的內(nèi)容循環(huán)，按模板格式化后返回多行html。

例如：

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

這里定義了一個名為listdata的模板，ul的內(nèi)部html將成為可循環(huán)的模板，即

 <li>{title}</li>

為待循環(huán)的內(nèi)容

我們綁定以下變量[{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指定綁定的屬性，其它使用方法完全一致。

模板的使用

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

如：{username}，即輸出變量username的內(nèi)容。

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

使用方法參見示例：

1.使用內(nèi)部函數(shù)處理輸出結(jié)果：

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

2.使用外部函數(shù)處理輸出結(jié)果：

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

3.使用多個函數(shù)處理輸出結(jié)果：

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

4.使用外部變量：

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

5.進(jìn)行簡單的運(yùn)算：

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

6.在模板中處理子循環(huán)：

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

特殊語法：

!號的使用

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

#號的使用

在函數(shù)名中使用，如果在函數(shù)名前加#，則指定這個函數(shù)為全局函數(shù)，這時這個函數(shù)必須是已經(jīng)定義好的全局函數(shù)或是javascript的內(nèi)部函數(shù)。 在變量名中使用，如果果變量名前加#，則指定這個變量為全局變量，這時這個變量必須是已經(jīng)定義好的全局變量。