Ext.XTemplate的語(yǔ)法

Ext.XTemplate是Ext中關(guān)于頁(yè)面模板的一個(gè)組件。用來(lái)將數(shù)據(jù)和模板組合出最終的html。所謂數(shù)據(jù)指的是javascript的對(duì)象。EMP在loadEntityToPage中使用了這個(gè)組件。舉例如下；

 1//javascript，我們要展現(xiàn)的javascript對(duì)象，這個(gè)對(duì)象一般來(lái)說(shuō)是從后臺(tái)取回來(lái)的
 2
 3//這是我的javascript對(duì)象表示
 4{
 5    id:"1232132132dfasf121r",
 6    name:"zcg",
 7    age:13,
 8    goodPerson:true,    //好人一個(gè)
 9    head:{            
10        size:15,
11        type:"smart"    //腦袋是聰明的
12    }
13    hands:
14        [
15            {
16                id:"123",
17                type:"left"    //左手
18            }
19            {
20                id:"456",
21                type:"right"
22            }
23        ]
24}

//html 模板

1<div id="template">
2    <span>編號(hào)：{id}</span>
3    <span>名字：{age}</span>
4</div>

在模板中，用“{}”括起來(lái)的內(nèi)容，被當(dāng)作是數(shù)據(jù)對(duì)象的一個(gè)屬性。例如{id}，會(huì)被替換成為數(shù)據(jù)對(duì)象的id，以此類(lèi)推。

問(wèn)題來(lái)了，按照上面的例子，如果你在模板中寫(xiě)一個(gè){head.type}，想把腦袋的類(lèi)型也顯示出來(lái)，這時(shí)候會(huì)發(fā)現(xiàn)出錯(cuò)了。原因是模板中不支持用{a.b}的方式表示嵌套屬性。那么怎么辦呢。分為兩種情況：

如果你從后臺(tái)取回來(lái)的數(shù)據(jù)只有一個(gè)，那么這樣寫(xiě)：{[values.head.type]}。

如果你從后臺(tái)取回來(lái)的數(shù)據(jù)不只一個(gè)：那么這樣寫(xiě)：{[values[xindex].head.type}}

語(yǔ)法解釋?zhuān)?#8220;{[]}”括起來(lái)的東西會(huì)被當(dāng)作javascript執(zhí)行，其中有幾個(gè)特殊的字符，values代表數(shù)據(jù)對(duì)象，如果數(shù)據(jù)對(duì)象是數(shù)組，那么用xindex代表當(dāng)前索引。

關(guān)于Ext.Template更多的信息：http://extjs.com/deploy/dev/docs/?class=Ext.XTemplate