快捷導(dǎo)航

使Ext的Template可以解析二層的json數(shù)據(jù)的方法

更新時(shí)間：2007年12月22日 00:53:28 作者：

Ext的Template支持通過傳入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è)測試：

復(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>說明替換成功。

但如果又這樣一個(gè)模板數(shù)據(jù)：

復(fù)制代碼代碼如下:

{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'}

我們想在替換時(shí)將模板中原cls部分替換為cls.o的值，也就是myclass，該怎么做呢？是不是想直接用{cls.o}，你可以試下，絕對無效，沒有替換。因?yàn)閠emplate匹配替換是直接對{}中冒號前的字符串與JSON變量進(jìn)行匹配的。當(dāng)然找不到cls.o這個(gè)串所以也就不能匹配。
好在Template支持對數(shù)據(jù)的解析處理。
我們可以自己定義一個(gè)解析函數(shù)即可。其實(shí)很簡單：

復(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的解析方法，在模板中訪問頂層的cls然后對cls(是一個(gè)object)的值進(jìn)行處理（直接訪問它的o屬性）即可。