|
|
API中有這樣一段示例：
復(fù)制代碼 代碼如下:
var t = new Ext.Template(
'<div name="{id}">',
'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
'</div>'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
稍作修改做個(gè)測(cè)試：
復(fù)制代碼 代碼如下:
var t = new Ext.Template(
'<div name="{id}">',
'<span class="{cls}">{name} {value}</span>',
'</div>'
);
var dt=t.apply({id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
alert(dt);
運(yùn)行上面的代碼會(huì)彈出<div name="myid"><span class="myclass">foo bar</span></div>說(shuō)明替換成功。
但如果又這樣一個(gè)模板數(shù)據(jù)：
復(fù)制代碼 代碼如下:
{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'}
我們想在替換時(shí)將模板中原cls部分替換為cls.o的值，也就是myclass，該怎么做呢？是不是想直接用{cls.o}，你可以試下，絕對(duì)無(wú)效，沒(méi)有替換。因?yàn)閠emplate匹配替換是直接對(duì){}中冒號(hào)前的字符串與JSON變量進(jìn)行匹配的。當(dāng)然找不到cls.o這個(gè)串所以也就不能匹配。
好在Template支持對(duì)數(shù)據(jù)的解析處理。
我們可以自己定義一個(gè)解析函數(shù)即可。其實(shí)很簡(jiǎn)單：
復(fù)制代碼 代碼如下:
var t = new Ext.Template(
'<div name="{id}">',
'<span class="{cls:this.parseJSON}">{name} {value}</span>',
'</div>'
);
t.parseJSON=function(data){return data.o};
var dt=t.apply({id: 'myid', cls: {o:'myclass'}, name: 'foo', value: 'bar'});
alert(dt)
我們定義了一個(gè)叫parseJSON的解析方法，在模板中訪問(wèn)頂層的cls然后對(duì)cls(是一個(gè)object)的值進(jìn)行處理（直接訪問(wèn)它的o屬性）即可。
JavaScript技術(shù)：使Ext的Template可以解析二層的json數(shù)據(jù)的方法，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
