Ext.XTemplate

1、 自动填充数组并切换作用域

使用 ”<tpl>” 标签和 ”for” 操作符，你可以把作用域切换到 ”for” 所指向的对象，然后访问这个对象的成员来组装模板。如果 ”for” 循环中的变量是一个数组，它将被自动填充，对于数组中的每个元素，重复 ”<tpl>” 标签中的模板 ( 定义 ) 块 ( 来自动填充 ) 。（译者注：这句的意思是，如果 for 循环里面指定的对象是个数组，就会自动解析这个数组，然后使用数组中的每个元素来填充模板。）

 

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Title: {title}</p>',

    '<p>Company: {company}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<p>{name}</p>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

 

2、 从内部的子模板作用域访问父对象

当处理一个子模板时，例如当迭代 ”child” 这个数组的时候，你可以通过 ”parent” 关键字来访问父对象的成员。

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<tpl if="age > 1">',

            '<p>{name}</p>',

             '<p>Dad: {parent.name}</p>',

        '</tpl>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

 

3、 数组元素序号和基本的匹配支持

当处理数组的时候，特殊的变量 ”{#}” 可以提供数组当前的 index+1 （这个数据）。模板也支持基本的数学运算符 ”+” 、 ”-” 、 ”*” 、 ”/” ，这些操作符可以直接在数字型的数据值上使用。

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<tpl if="age > 1">',

            '<p>{#}: {name}</p>',  // <-- Auto-number each item

            '<p>In 5 Years: {age+5}</p>',  // <-- Basic math

            '<p>Dad: {parent.name}</p>',

        '</tpl>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

  

4、 自动渲染普通的（译者注：数组元素不是对象，是基本的 String 、 Number ）数组

普通的数组，包含的元素（不是对象型的）可以使用特殊的变量 ”{.}” 在一个循环体内自动渲染。这个变量用来描述数组当前索引中的值。

var tpl = new Ext.XTemplate(

    '<p>{name}\'s favorite beverages:</p>',

    '<tpl for="drinks">',

       '<div> - {.}</div>',

    '</tpl>'

);

tpl.overwrite(panel.body, data);


5、 基本的条件匹配逻辑

使用 ”<tpl>” 标签和 ”if” 操作符，你可以提供条件检查，来决定是否渲染模板中指定的部分。注意：没有 ”else” 操作符 --- 如果需要，你必须使用两个条件不同的 ”if” 。这里需要编码好的（译者注：意指 URL 转义字符 ）符号，就像以下的示例一样 :

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

         '<tpl if="age &gt; 1">',// ß 注意： ”>” 号是编码好的。

            '<p>{name}</p>',

        '</tpl>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

 


6、 执行任意内嵌代码的能力

在一个模板里面，位于 ”{[…]}” 号中的任何东西都被当作是需要在模板作用域内被执行的代码。在这段代码里面，有一些特殊的变量可以使用：

“ values ” ：当前作用域下的值。如果你使用子模板来改变作用域，你就可以改变 ”values” 的值。

“ parent ” ：“祖先”模板的作用域（或值）。

“ xindex ” ：如果你在一个循环的模板里面，这个值表示你当前所在的“第几次”循环（从 1 开始）。

“ xcount ” ：如果你在一个循环的模板里面，这个值表示你正在迭代的数组的总长度。

“ fm ” ： Ext.util.Format 对象的别名。

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

       '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',

        '{name}',

        '</div>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

（译者注：使用myext 放出来的 Ext2.0 API 的人请注意，这份 API 上的这段示例代码有错误，无法运行。笔者查阅了原始的文档，发现和他们发出来的不一致。 ）

（译者注：运行效果图如下。



）

 

7、 模板的成员函数

可以在 config 对象中定义一个或多个成员函数传递给 XTemplate 的构造函数，来进行更复杂的处理。

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<tpl if="this.isGirl(name)">',

            '<p>Girl: {name} - {age}</p>',

        '</tpl>',

        '<tpl if="this.isGirl(name) == false">',

            '<p>Boy: {name} - {age}</p>',

        '</tpl>',

        '<tpl if="this.isBaby(age)">',

            '<p>{name} is a baby!</p>',

         '</tpl>',

    '</tpl></p>', {

     isGirl: function(name){

         return name == 'Sara Grace';

     },

     isBaby: function(age){

        return age < 1;

     }

});

tpl.overwrite(panel.body, data);

 

总结：

         请注意模板的第六和第七个特性，这两个特性使得我们在实现处理数据时的一些特殊的要求变得轻而易举。而且这种写法代码清晰，可以说是相当优雅。

有了这七个示例给出来的 Demo ，对于模板的使用应该就比较顺畅了。下一篇，我们就来分析模板 XTemplate 到底是怎么实现的，它的运行机制是什么。

评论

1 楼 andy_long 2013-07-26  

eh[i][/i]j

[flash=200,200][flash=200,200][flash=200,200][url][url][url][url][url][img][img][list]

[*][list]

[*][*] [flash=200,200][flash=200,200][flash=200,200][url][url][img][list]

[*][*][*] 引用 引用 [u][b][/b][/u]

[*][/list][/img][/url][/url][/flash][/flash][/flash]

[*][/list]

[/list][/img][/img][/url][/url][/url][/url][/url][/flash][/flash][/flash]

|||||||||||||||||||||||

|||||||||||
||||||||||

||||||||||
|||||||||

|||||||||
||||||||

||||||||
|||||||

|||||||
||||||

||||||
|||||

|||||
||||

||||
|||

|||
||

||
|

|