|
|
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'});
稍作修改做個測試：
復(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);
運行上面的代碼會彈出<div name="myid"><span class="myclass">foo bar</span></div>說明替換成功。
但如果又這樣一個模板數(shù)據(jù)：
復(fù)制代碼 代碼如下:
{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'}
我們想在替換時將模板中原cls部分替換為cls.o的值，也就是myclass，該怎么做呢？是不是想直接用{cls.o}，你可以試下，絕對無效，沒有替換。因為template匹配替換是直接對{}中冒號前的字符串與JSON變量進行匹配的。當(dāng)然找不到cls.o這個串所以也就不能匹配。
好在Template支持對數(shù)據(jù)的解析處理。
我們可以自己定義一個解析函數(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)
我們定義了一個叫parseJSON的解析方法，在模板中訪問頂層的cls然后對cls(是一個object)的值進行處理（直接訪問它的o屬性）即可。
JavaScript技術(shù)：使Ext的Template可以解析二層的json數(shù)據(jù)的方法，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
