Ext.XTemplate的語法

Ext.XTemplate是Ext中關于頁面模板的一個組件。用來將數據和模板組合出最終的html。所謂數據指的是javascript的對象。EMP在loadEntityToPage中使用了這個組件。舉例如下；

 

 1//javascript，我們要展現的javascript對象，這個對象一般來說是從后臺取回來的
 2
 3//這是我的javascript對象表示
 4{
 5    id:"1232132132dfasf121r",
 6    name:"zcg",
 7    age:13,
 8    goodPerson:true,    //好人一個
 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>編號：{id}</span>
3    <span>名字：{age}</span>
4</div>

 

在模板中，用“{}”括起來的內容，被當作是數據對象的一個屬性。例如{id}，會被替換成為數據對象的id，以此類推。

問題來了，按照上面的例子，如果你在模板中寫一個{head.type}，想把腦袋的類型也顯示出來，這時候會發現出錯了。原因是模板中不支持用{a.b}的方式表示嵌套屬性。那么怎么辦呢。分為兩種情況：

如果你從后臺取回來的數據只有一個，那么這樣寫：{[values.head.type]}。

如果你從后臺取回來的數據不只一個：那么這樣寫：{[values[xindex].head.type}}

語法解釋：“{[]}”括起來的東西會被當作javascript執行，其中有幾個特殊的字符，values代表數據對象，如果數據對象是數組，那么用xindex代表當前索引。

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