Ext的Template支持通過傳入json數(shù)據(jù)的方式進行模板替換。
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'});
稍作修改做個測試：
代碼如下:
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);
運行上面的代碼會彈出<div name="myid"><span class="myclass">foo bar</span></div>說明替換成功。
但如果又這樣一個模板數(shù)據(jù)：
代碼如下:
{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'}
我們想在替換時將模板中原cls部分替換為cls.o的值，也就是myclass，該怎么做呢？是不是想直接用{cls.o}，你可以試下，絕對無效，沒有替換。因為template匹配替換是直接對{}中冒號前的字符串與JSON變量進行匹配的。當然找不到cls.o這個串所以也就不能匹配。
好在Template支持對數(shù)據(jù)的解析處理。
我們可以自己定義一個解析函數(shù)即可。其實很簡單：
代碼如下:
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)
我們定義了一個叫parseJSON的解析方法，在模板中訪問頂層的cls然后對cls(是一個object)的值進行處理（直接訪問它的o屬性）即可。
