Xtemplate 的使用

Xtemplate

 知识点 ：

迭代：
<tpl for="kids">
对 kids 迭代
分支
<tpl if="age &lt; 18">

占位符
{variable}
<p>name:{name}</p>
表达式
 在[ ]中的代码被认为是表达式
 在[ ] 中可以使用下列变量
* values: 当前对象的引用,通过这个对象你可以直接改变重写模板所用的数据
* parent: The scope (values) of the ancestor template.
* xindex:循环模板中迭代的下标，开始下标为1
* xcount: 如果正在循环模板中，表示循环的次数.
* fm:  Ext.util.Format.的别名
 模板中使用函数

  ..........

 示例分析：

      var data = {
                name: 'Jack Slocum',
                company: 'Ext JS, LLC',
                address: '4 Red Bulls Drive',
                city: 'Cleveland',
                state: 'Ohio',
                zip: '44102',
                kids: [{
                    name: 'Sara Grace',
                    age:33,
                    kids:[{name:"户惊涛",age:12}]
                },{
                    name: 'Zachary',
                    age:26
                },{
                    name: 'John James',
                    age:16
                }]
        }

 
 '<br>{[values.name + "aaa"]}',
    k'<tpl for="ids">',
 '<p><tpl if="age &lt; 18"><span style="color:red"></tpl>{#}:{name} Dad:{parent.name}<tpl if="age &lt; 18"></span></tpl></p>'
 
 for=“kids” if=”age &lt; 18” 和 “aaa” 使用的是双引号，如果外边使用双引号而这些地方使用单引号是不会成功的。
 “<tpl for=’ids’>”,
 “{name}” 输出的是父模板中的name,虽然输出内容不准确，但还是输出了内容，说明不是由于外面的单引号引起的，而是内部使用双引号引起的。
 
 
 不在 [ ] 中也可以使用基本运算符号 如 +-* /,不过只是对数字类型的数据支持
 age 数子类型 {age+ 22} 输出两数相加后的结果 {age+"22"}输出的结果就是它本身{age+"22"}
 
1.            '<tpl for="kids">',
                '{name}',
                '<tpl if="[values.kids]">{[values.kids[0]]}</tpl>',
             "</tpl>"
 
  2.    '<tpl for="kids">',
                '{name}',
            '<tpl for="kids">',
                        '{name}',
              "</tpl>"
    "</tpl>"


1. value.kids.0 为空或不是对象
2 dosen’t work.