GXT之旅：第六章：Templates(2)——XTemplate(1)

XTemplate

XTemplate比Template更为有用，除了拥有Template相同的功能之外，还具有更多有用的功能——提供使用更多的<tpl>标记来满足自己需要的html显示效果。

为了下面例子的引用，首先，定义一个Person的ModalData

public class Person extends BaseModel {
public Person(String firstName,String lastName) {
set("firstName", firstName);
set("lastName", lastName);
}
}

For 功能

• 首先，让我们深入了解一下上一个例子中我们所使用的for。首先我们先第一个friends的list

List<Person> friends = Arrays.asList(new Person("Fred", "Bloggs"),
new Person("John", "Smith"));

• <tpl>标签的for操作符，可以迭代friends里面的每一个item，并赋予template。字符“.”说明了，template会加工处理friends里面的每一个item

<tpl for=".">
<p>{firstName} {lastName}</p>
</tpl>

• 将friends应用了如上的template的时候，template会自动的根据占位符变量名去寻找friends的每一个对象里面的值。运行的结果大致如下：

Fred Bloggs
John Smith

• 在friends的基础之上，我们再新建一个person对象，用来存储friends

Person person = new Person("Daniel", "Vaughan");
person.set("friends", friends);

• 现在我们要加工person的内容，并且加工person里面存储的friends内容的话，我们的template的定义应该如下（此时在看看for操作符后面的变化）

<p>{firstName} {lastName}'s friends:</p>
<ul>
<tpl for="friends">
<li>{firstName} {lastName}</li>
</tpl>
</ul>

Daniel Vaughan's friends:

• Fred Bloggs
• John Smith

• 运行结果如上。
• 习惯上来说，我们一般自定义一个方法，来设置template的string，自然的getTemplate()方法命名跟直观易懂一些。

private String getTemplate() {
StringBuilder sb = new StringBuilder();
sb.append("<p>{firstName} {lastName}'s friends</p>");
sb.append("<ul>");
sb.append("<tpl for=\"friends\">");
sb.append("<li>{firstName} {lastName}</li>");
sb.append("</tpl>");
sb.append("</ul>");
return sb.toString();
}

• template的创建和数据应用如下

XTemplate xTemplate = XTemplate.create(getTemplate());
String html = template.applyTemplate(Util.getJsObject(person, 2));

• 注意Util.getJsObject方法参数的含义，person是指应用template的属于；2是指person数据挖掘的深度

if 功能

<tpl>标记，同样有if功能的操作符，使用于按条件处理的情况。

• 让我们在Person ModelData里加入age字段

public class Person extends BaseModel {
public Person(String firstName,String lastName, int age) {
set("firstName", firstName);
set("lastName", lastName);
set("age", age);
}
}

• 在此Person的结构下，定义一个新的friends list

List<Person> friends = Arrays.asList(new Person("Fred", "Bloggs",
20), new Person("John", "Smith", 40));
Person person = new Person("Daniel", "Vaughan", 30);
person.set("friends", friends);

• 我们在定义template string的时候，使用if操作符，限定age大于30的friends数据才会被html渲染出来

<p>{firstName} {lastName}'s friends over 30:</p>
<ul>
<tpl for="friends">
<tpl if="age > 30">
<li>{firstName} {lastName}</li>
</tpl>
</tpl>
</ul>

• 将上面的friends和template应用在一起之后，显示的内容如下

Daniel Vaughan's friends over 30:

• John Smith

• 注意，if操作符后面的大于符号使用的是&gt; 下面是一个列表介绍不同的操作符的

• 注意：在<tpl>标记里没有else操作符，如果想实现else的语句跳转，我们可以使用if的相反条件判断。
• if比较表达式，支持使用ModelData的field。比如之前的比较表达式是年龄大于30，我们可以替换为年龄大于person对象里面age属性的值。我们可以这样定义template

<p>{firstName} {lastName}'s friends over {age}:</p>
<ul>
<tpl for="friends">
<tpl if="age > parent.age">
<li>{firstName} {lastName}</li>
</tpl>
</tpl>
</ul>

• 注意，firstName不可以命名成first-name。不要使用连字号。

支持简单的数学运算

在Template中，支持简单的数学运算。

比如我们希望age的属性加1，那么可以写成{age+1}。

如果我们希望显示的friends的age要大于person的age的话，我们可以如下定义template

<p>{firstName} {lastName}'s friends over {age}:</p>
<ul>
<tpl for="friends">
<tpl if="age > parent.age">
<li>{firstName} {lastName} ({age}-{parent.age} years older)</li>
</tpl>
</tpl>