使Ext的Template可以解析二層的json數(shù)據(jù)的方法
更新時(shí)間：2007年12月22日 00:53:28 作者：
使Ext的Template可以解析二層的json數(shù)據(jù)的方法
Ext的Template支持通過(guò)傳入json數(shù)據(jù)的方式進(jìn)行模板替換。
API中有這樣一段示例：
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è)試：
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ù)：
{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)單：
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屬性）即可。
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屬性）即可。
相關(guān)文章
這是個(gè)人在最近使用json時(shí)做的總結(jié)，拿出來(lái)給沒(méi)接觸過(guò)的小弟們曬曬，適用與沒(méi)接觸過(guò)json的人員，其中json2。js請(qǐng)到j(luò)son官網(wǎng)下載。2009-10-10
主要是了解一下json的簡(jiǎn)單寫(xiě)法與應(yīng)用，方便想學(xué)習(xí)json的朋友2008-08-08
json2.js的初步學(xué)習(xí)與了解，想要學(xué)習(xí)json的朋友可以參考下。2011-10-10
json-lib出現(xiàn)There is a cycle in the hierarchy解決辦法
如果需要解析的數(shù)據(jù)間存在級(jí)聯(lián)關(guān)系，而互相嵌套引用，在hibernate中極容易嵌套而拋出net.sf.json.JSONException: There is a cycle in the hierarchy異常。2010-02-02
利用NodeJS的子進(jìn)程(child_process)調(diào)用系統(tǒng)命令的方法分享
child_process即子進(jìn)程可以創(chuàng)建一個(gè)系統(tǒng)子進(jìn)程并執(zhí)行shell命令，在與系統(tǒng)層面的交互上挺有用處2013-06-06
一篇了解JSON與數(shù)據(jù)存儲(chǔ)基礎(chǔ)知識(shí)
這篇文章主要介紹了JSON與數(shù)據(jù)存儲(chǔ)基礎(chǔ)知識(shí),本篇文章較為基礎(chǔ)，但非常詳細(xì)，可以很好的理解JSON和數(shù)據(jù)存儲(chǔ)，,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了淺談JSON5解決了JSON的兩大痛點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要給大家介紹了任意Json如何轉(zhuǎn)成無(wú)序列表，文中給出了詳細(xì)的示例代碼，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。JSON采用完全獨(dú)立于語(yǔ)言的文本格式，這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。易于人閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成2017-09-09
將List對(duì)象列表轉(zhuǎn)換成JSON格式的類(lèi)實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇將List對(duì)象列表轉(zhuǎn)換成JSON格式的類(lèi)實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07